我下载了这个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-tab 中显示。
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(和所有其他浏览器)，我的 Bootstrap 文件优先于任何其他样式表。
我该如何解决这个问题？老实说，我不想将 !important 添加到所有内容中，因为它不整洁而且感觉像是糟糕的编程习惯。如果我需要发布任何其他代码，请发表评论，我会这样做。我是 Wordpress 的新手，所以不知道解决这个问题需要什么。
最佳答案
这是由于特异性，bootstrap 样式比您的样式更具体，因此它们会优先考虑。由于您的自定义样式表包含在 Bootstrap 样式表之后，您可以通过匹配选择器的特异性来覆盖 Bootstrap 样式。因此，将 .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 fiddle : http://jsfiddle.net/dtz7Ld9n/
有关更多信息，请查看 CSS Specificity: Things You Should Know
关于html - Wordpress Bootstrap 主题不使用样式，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26254566/