Question

CSS问题：如果两个不同的选择器适用于一个元素，谁赢了？

我知道这不应该发生，但我想调整一个遗留应用程序，而CSS正处于中间位置。

Answer 1

规范中的gory details实际上是相当可读的。总结：

!important规则和内联style规则获胜最多。
否则，通常是更具体的胜利。 #id是一个更具体的选择器，而.classname是比tagname更具体的选择器。
在规则具体相同的情况下，最后宣布的规则获胜。

没有特别的理由说明“不应该发生这种情况”。指定宽刷规则然后添加更具体的规则来定位一个案例是正常的;单个元素上的多个相同属性规则并不罕见或不合需要。

Answer 2

你必须在选择器中找到#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＆GT; 021

所以#foo胜利

Answer 3

应该发生！这就是为什么它被称为CASCADING样式表。您可以找到优先级here

的示例

Answer 4

请参阅规范的specificity order部分（以及该章的其余部分！重要规则以及规则在样式表中显示的顺序也会产生影响）。

Answer 5

“＃id”比“.class”名称更强大，“。class”比“tag”名称更强大。但是，如果我们应用“！important”而不是它的大部分优先权。

！重要
内联样式
ID
类
标签

Answer 6

选择器之间的优先级取决于它们的具体程度。更具体的选择者胜过不太具体。

如果两个选择器具有同等特异性，则后者胜过第一个选择器。

有三个级别的特异性，id，class和element。因此，#elem胜过.elem，因为ID更具体。 .elem .cont胜过.elem，因为它在同一级别拥有更多选择器。

了解更多“冲突发生时会发生什么？”在Selectutorial。

Answer 7

CSS文件中的顺序仅在选择器具有相同特异性时才有意义。

有关选择器特异性的更多信息： Andy Clarke penned Specificity Wars which is the best overview of how they work.

Answer 8

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
}

可以找到优先级规则here。

我总是建议使用Firefox “firebug”插件。它将准确显示为特定元素评估的属性及其原因，强调级联期间的覆盖。

Answer 9

！重要
内联样式
#ID
类
标签

CSS选择器的优先级是什么

9 个答案: