CSS选择器的优先级是什么答案

【问题标题】：What are the priorities among CSS selectorsCSS选择器的优先级是什么
【发布时间】：2010-12-10 21:00:57
【问题描述】：

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

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

【问题讨论】：

完全重复的stackoverflow.com/questions/514506/understanding-css-selectors

标签： html css css-selectors

【解决方案1】：

“#id”比“.class”名称更强大，“.class”比“tag”名称更强大。但是如果我们应用“！important”，那么它的优先级就是大多数。

!重要
内联样式
身份证
类
标签

【讨论】：

【解决方案2】：

!重要
内联样式
#id
类
标签

【讨论】：

这并没有提供问题的答案。要批评或要求作者澄清，请在他们的帖子下方发表评论 - 您可以随时评论自己的帖子，一旦您有足够的reputation，您就可以comment on any post。 - From Review
@sebastianbrosch 这怎么不试图提供答案？它可能完全错误或格式不正确，but that doesn't mean we should abuse the review queues to delete it.

【解决方案3】：

CSS 代表 Cascading 样式表。这意味着规则以级联方式应用于元素。不同的选择器应用于一个元素是完全正常的。例如，想到以下几点：

<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” 插件。它将准确地向您展示针对特定元素评估哪些属性以及原因，并强调级联期间的覆盖。

【讨论】：

【解决方案4】：

你必须在选择器中找到#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 赢了

【讨论】：

!important 相当于加了 1000，顺便说一句。 :)

【解决方案5】：

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

【讨论】：

【解决方案6】：

在CSS文件中的顺序只有，如果选择器共享相同的特征，则只有很重要。

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

【讨论】：

【解决方案7】：

选择器之间的优先级由它们的具体程度控制。更具体的选择器胜过不太具体的选择器。

如果两个选择器的特定性相同，则后面的选择器胜过第一个。

具体分为三个级别，id、class和element。所以#elem 胜过.elem，因为 id 更具体。 .elem .cont 胜过 .elem，因为它在同一级别有更多选择器。

阅读“发生冲突时会发生什么？”下的更多信息在Selectutorial。

【讨论】：

【解决方案8】：

规范中的gory details 实际上可读性很强。总结：

!important 规则和内联style 规则获胜最多。
否则，通常更具体的获胜。 #id 是比.classname 更具体的选择器@ 是比tagname 更具体的选择器。
如果规则同样具体，最后宣布的一方获胜。

这种“不应该发生”并没有什么特别的原因。指定一个粗略的规则然后添加更具体的规则来针对一个案例是正常的；单个元素上的多个相同属性规则并不少见或不受欢迎。

【讨论】：

还需要考虑用户/作者的样式表：By default, rules in an author's style sheet override those in a user's style sheet. Both author and user style sheets may contain "!important" declarations, and user "!important" rules override author "!important" rules.

【解决方案9】：

请参阅规范的specificity order 部分（连同该章的其余部分，作为 !important 规则和规则出现在样式表中的顺序也会产生影响）。

【讨论】：