题
CSS问题:如果两个不同的选择器应用于一个元素,谁会获胜?
我知道这不应该发生,但我想调整遗留应用程序,而 CSS 却处于中间位置。
解决方案
规范中的血腥细节实际上是相当可读的。总结:
-
!important
规则和内联style
规则最受欢迎。 -
否则,通常是更具体的胜利。
#id
是比更具体的选择器.classname
是比tagname
更具体的选择器。 -
在规则具体相同的情况下,最后宣布的规则获胜。
醇>
没有特别的理由说明这个‘不应该发生’。指定宽刷规则然后添加更具体的规则来定位一个案例是正常的;单个元素上的多个相同属性规则并不罕见或不合需要。
其他提示
你必须在选择器中找到#no of id = A,#no of class = B和#no of tag = c
价值较高的ABC获胜。
.wrapper .title p {
//some other rules
}
A=0 B=2 C=1 =021
\#foo {
// some more rules
}
A=1 = 100
.bar .head div li{
// some more rules
}
A=0 B=2 C=2 =022
100〕022> 021
所以#foo胜利
应该发生!这就是为什么它被称为CASCADING样式表。您可以找到优先级的示例此处
请参阅规范的特殊性命令部分(以及该章的其余部分为!重要规则和规则在样式表中出现的顺序也会产生影响。
“#id”比“.class”名称更强大,“.class”比“tag”名称更强大。但如果我们应用“!important”,那么它的优先级就是其中的大多数。
- !重要的
- 内联样式
- ID
- 班级
- 标签
选择器之间的优先级取决于它们的具体程度。更具体的选择者胜过不太具体。
如果两个选择器具有同等特异性,则后者胜过第一个选择器。
有三个级别的特异性,id,class和element。所以 #elem
胜过 .elem
,因为id更具体。 .elem .cont
胜过 .elem
,因为它在同一级别有更多的选择器。
在“发生冲突后会发生什么?”下阅读更多内容在 Selectutorial 。
CSS文件中的顺序仅在选择器具有相同特异性时才有意义。
有关选择器特异性的更多信息: Andy Clarke撰写了“特殊性战争”,这是对其运作方式的最佳概述。
CSS代表级联样式表。这意味着规则以级联方式应用于元素。不同的选择器适用于元素是完全正常的。例如,考虑以下几点:
<div class="wrapper">
<div id="foo" class="bar" style="some rules">Test</div>
</div>
以下规则会对“foo”产生影响。元素:
.wrapper {
//some other rules
}
#foo {
// some more rules
}
.bar {
// some more rules
}
优先顺序的规则可以在这里找到。
我总是建议使用Firefox &quot; firebug&quot; 插件。它将准确显示为特定元素评估的属性及其原因,强调级联期间的覆盖。