CSS 选择器的优先级是什么

Question

CSS问题：如果两个不同的选择器应用于一个元素，谁会获胜？

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

Answer 1

规范中的血腥细节实际上是相当可读的。总结：

1. ！important 规则和内联 style 规则最受欢迎。

2. 否则，通常是更具体的胜利。 #id 是比更具体的选择器.classname 是比 tagname 更具体的选择器。

3. 在规则具体相同的情况下，最后宣布的规则获胜。

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

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样式表。您可以找到优先级的示例此处

Answer 4

请参阅规范的特殊性命令部分（以及该章的其余部分为！重要规则和规则在样式表中出现的顺序也会产生影响。

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撰写了“特殊性战争”，这是对其运作方式的最佳概述。

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
}

优先顺序的规则可以在这里找到。

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

Answer 9

<01>

！important

内联样式

#id

class

标签