【发布时间】：2011-02-10 02:56:42
【问题描述】：
我的 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（最新版本）中
包括用于证明的屏幕截图。
三十点编辑：
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>
【问题讨论】：
-
看起来很奇怪。唯一想到的是一些疯狂的隐形控制字符弄乱了第一个块的关闭
}，从而融合了块。 -
只是预感：您是否将您的
aside设置为display: block？我觉得这可能与使用 HTML5 元素和浏览器将其视为内联元素有关。 -
也许浏览器正在接受
rules aside字面意思？ :) -
@Stacey：你能在 jsfiddle.net 上重新创建这个并给我们发送一个链接，以便我们可以使用它吗？
-
如果样式本身没有被应用，那么问题是谷歌浏览器的错误（或者它是开发工具）。我会向 Google Chrome 团队提交错误报告。
标签： html css google-chrome