CSS子选择器的优先级高于类选择器？
我有以下 HTML：
<div class="form-square">
<div class="seven-col">
Hello World!
</div>
</div>
和以下 CSS：
div.form-square > div {
padding: 50px;
}
.seven-col {
padding: 0;
}
Firefox 和 Firebug 使用两个 CSS 规则中的第一个。为什么“div.form-square > div”的优先级高于更具体的“.seven-col”？
I have the following HTML:
<div class="form-square">
<div class="seven-col">
Hello World!
</div>
</div>
And the following CSS:
div.form-square > div {
padding: 50px;
}
.seven-col {
padding: 0;
}
Firefox and Firebug is using the first of the two CSS rules. How come "div.form-square > div" has higher precedence than ".seven-col" which is more specific?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
div.form-square> div由 1 个类选择器 + 2 个类型选择器（加上一个子组合器）组成。.seven-col由 1 个类选择器组成。类选择器的数量是相等的，因此比较是在类型选择器中完成的。第一个选择器有更多类型选择器，因此更具体。
特异性基于整个事物中每种选择器的数量，而不是最右侧组合器右侧的部分。
（注意：第一个示例也具有 CSS 2 所谓的子选择器，但这不计入特异性，并且描述了元素之间的关系而不是元素的功能，这可能是 CSS 3 将其重命名为子组合器的原因）。
div.form-square > divconsists of 1 class selector + 2 type selectors (plus a child combinator)..seven-colconsists of 1 class selector.The number of class selectors is equal, so the comparison is done in type selectors. The first selector has more type selectors so it is more specific.
Specificity is based on the number of each kind of selector in the entire thing, not for the part on the right hand side of the rightmost combinator.
(NB: The first example also has what CSS 2 calls a child selector, but that doesn't count towards specificity and describes a relationship between elements rather than a feature of an element, which probably why CSS 3 is renaming it to the child combinator).
正确，第一条规则比第二条更具体，因为仅类选择器的优先级相当低。
Correct, the first rule is more specific than the second, because a class only selector has a fairly low priority.
.seven-col有 1 个类 = +1div.form-square > div有 2 个元素和 1 个类 = +3使用此 CSS 特异性计算器检查一下：
http://www.suzyit.com/tools/specificity.php
.seven-colhas 1 class = +1div.form-square > divhas 2 elements and 1 class = +3Check it out with this CSS specificity calculator:
http://www.suzyit.com/tools/specificity.php