CSS中的特殊反向级联
Cie*_*iel 8 html css google-chrome
我有一种情况,我的CSS应用的样式不适用于被样式化的对象.这是我的site.css文件中的确切代码...
.rules aside {
width: 270px;
right: 0px;
top: 0px;
float: left;
}
.rules aside h3 {
border-bottom-width: 2px;
border-bottom-style: solid;
border-bottom-color: #2A2A2A;
padding-bottom: 6px;
padding-top: 11px;
margin-bottom: 0px;
color: #F0E29A;
font-size: 14px;
letter-spacing: -0.5px;
text-transform: uppercase;
}
现在这里有一些利用它的HTML ......
<article class="content rules">
<section>
// ...
</section>
<aside>
Some Content
</aside>
</article>
这是Chrome的Inspector为<aside>元素显示的CSS标记.
.rules aside {
border-bottom-width: 2px;
border-bottom-style: solid;
border-bottom-color: #2A2A2A;
padding-bottom: 6px;
padding-top: 11px;
margin-bottom: 0px;
color: #F0E29A;
font-size: 14px;
letter-spacing: -0.5px;
text-transform: uppercase;
width: 270px;
right: 0px;
top: 0px;
float: left;
}
这没有任何意义.只有一个<h3>元素应该从样式化.rules aside h3选择.然而,它正在逐步落入根<aside>元素.我也有其他情况发生这种情况.Google Chrome中发生了这种情况(最新版本)
包括用于证明的屏幕截图.
thirtydot编辑:
jsfiddle.net/2hnLx - 从我的机器上的.html文件运行这个完全相同的代码会产生问题结果,但是从jsFiddle运行它会产生预期的结果. - 斯泰西
来自jsFiddle的代码:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>jsFiddle Example</title>
<style type="text/css">
article, section, aside, header, nav { display: block; }
#container {
margin: 0px auto;
width: 960px;
position: relative;
}
section {
float: left;
width: 685px;
left: 0px;
background-color: #ccc;
}
section h2 {
padding: 10px;
}
section h3 {
font-size: 32px;
color: #ffcc00;
font-weight: bold;
padding: 10px;
border-bottom-width: 2px;
border-bottom-style: solid;
border-bottom-color: #2A2A2A;
margin-bottom: 18px;
margin-left: 10px;
margin-right: 10px;
}
.rules aside {
width: 270px;
right: 0px;
top: 0px;
float: left;
background-color: #000;
}
aside h3 {
border-bottom-width: 2px;
border-bottom-style: solid;
border-bottom-color: #2A2A2A;
padding-bottom: 6px;
padding-top: 11px;
margin-bottom: 0px;
color: #F0E29A;
font-size: 14px;
letter-spacing: -0.5px;
text-transform: uppercase;
background-color: #fff;
}
</style>
</head>
<body>
<div id="container">
<article>
<section>
<p>Section Text</p>
</section>
<aside>
<p>Aside Text</p>
</aside>
</article>
</div>
</body>
</html>
解决了。
这是 BOM。尝试将 site.css 文件保存为无 BOM 的 UTF-8，它会起作用。
更新
这是固有的：带有 BOM 的 UTF-8 HTML 和 CSS 文件（以及如何使用 Python 删除 BOM）