我下载了此template以便与Wordpress一起使用。正是我想要的(颜色除外),这是Wordpress的基本主题,我可以对其进行修改以适合我们设计师的设计要求。

我注意到我的样式未应用于元素。仅适用某些内容。我的head标签-出现在页面中的标签,而不是Wordpress中的标签-看起来像这样(为清楚起见,我仅包含基础知识):

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>WP | Just another WordPress site</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="pingback" href="http://siteurl/xmlrpc.php">

    <!-- wordpress head functions -->
    <link rel="stylesheet" id="bootstrap-css" href="http://siteurl/wp-content/themes/wordpress-bootstrap-master/library/css/bootstrap.css?ver=1.0" type="text/css" media="all">
    <link rel="stylesheet" id="wpbs-style-css" href="http://siteurl/wp-content/themes/wordpress-bootstrap-master/css/style.css?ver=1.0" type="text/css" media="all">
    <!-- more stuff -->
    <!-- end of wordpress head -->
    <!-- custom styles -->
    <link rel="stylesheet" type="text/css" href="http://siteurl/wp-content/themes/wordpress-bootstrap-master/css/editor-style.css">
    <link rel="stylesheet" type="text/css" href="http://siteurl/wp-content/themes/wordpress-bootstrap-master/css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="http://siteurl/wp-content/themes/wordpress-bootstrap-master/css/fonts.css">
    <!-- end of custom styles -->
    <!-- a bunch of IE fallbacks -->
</head>


我总是给人以下印象:a)最后一个样式表的优先级高于之前加载的样式表,并且b)专门针对性的样式覆盖了组样式。现在,在加载到标题的自定义样式表(style.css)中,我有以下CSS:

a.navbar-brand {
    font-family: lao_uiregular;
    font-size: 1.7em;
    color: #2a73ba;
    text-transform: uppercase;
}


但是颜色没有显示出来。我知道我可以使用!important强制执行此操作,但可以想象一下,如果所有内容最后都带有!important,看起来会多么不整洁。当我检查Google Chrome中的元素时,它会在我的Styles-选项卡中显示出来。

media="all"
@media (min-width: 768px) //bootstrap.css
.navbar > .container .navbar-brand {
    margin-left: -15px;
}
localhost/media="all" //bootstrap.css
.navbar-default .navbar-brand {
    color: #777777;
}
localhost/media="all" //style.css
.navbar-brand {
    font-family: lao_uiregular;
    font-size: 1.7em;
    color: #2a73ba;
    text-transform: uppercase;
}


因此,根据Google(以及所有其他浏览器)的说法,我的引导程序文件的优先级高于任何其他样式表。

我怎样才能解决这个问题?老实说,我不想在所有内容中添加!important,因为它不整洁并且感觉像是不好的编程习惯。如果我需要发布任何其他代码,请发表评论,我会做的。我是Wordpress的新手,所以不知道要解决此问题需要什么。

最佳答案

这是由于特定性,引导程序样式比您的样式更具体,这导致它们具有优先权。由于自定义样式表包含在引导样式之后,因此您可以通过匹配选择器的特殊性来覆盖引导样式。因此,将.navbar-brand更改为.navbar-default .navbar-brand

HTML:

<ul class="navbar-default">
    <li><a class="navbar-brand" href="#">This will be blue</a></li>
    <li><a class="navbar-brand2" href="#">This will be red</a></li>
</ul>


CSS:

.navbar-default .navbar-brand {
    color: red;
}
/*This will work*/
.navbar-default .navbar-brand {
    color: blue;
}
.navbar-default .navbar-brand2 {
    color: red;
}
/*This won't work*/
.navbar-brand2 {
    color: blue;
}


JS小提琴:http://jsfiddle.net/dtz7Ld9n/

有关更多信息,请查看CSS Specificity: Things You Should Know

关于html - Wordpress Bootstrap主题不使用样式,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/26254566/

10-11 22:44
查看更多