Question

我下载了此template以便与Wordpress一起使用。这正是我想要的（除了颜色），一个基本的Wordpress主题，我可以修改，以适应我们的设计师给我的设计。

我注意到我的样式没有应用于元素。只有一些东西被应用。我的头标记 - 结果页面，而不是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（以及所有其他broswers），我的引导程序文件优先于任何其他样式表。

我该如何解决这个问题？老实说，我不想将!important添加到所有内容中，因为它不整洁，感觉编程实践不好。如果我需要发布任何其他代码，请发表评论，我会这样做。我是Wordpress的新手，所以不知道解决问题需要什么。

Answer 1

这是由于特异性，引导样式比您的样式更具体，导致它们更喜欢。由于您的自定义样式表包含在引导样式之后，您可以通过匹配选择器的特异性来覆盖引导样式。因此，将.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

Wordpress Bootstrap主题不使用样式

1 个答案: