CSS选择器中的优先级是什么？

Question

CSS选择器中的优先级是什么？

htmlcsscss-selectors

14

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

我知道这不应该发生，但是我想修改一个遗留应用程序，而CSS正处于中间。

- flybywire

1

精确复制 https://dev59.com/nEbRa4cB1Zd3GeqP0XTP - Jonathan Fingland

9个回答

7

您需要在选择器中找到id为A的#号数量，class为B的#号数量和标签为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

so #foo wins

- jegan

1

!important 相当于添加了 1000，顺便说一下 :) - poitroae

5

"#id"比".class"和"tag"名称更加强大。但如果我们使用"!important"，则其优先级最高。

!important
内联样式
id
class
tag

- Gaurav Tripathi

5

这就是为什么它被称为层叠样式表，应该会发生！您可以在此处找到优先级的示例。

- Manu

2

请参阅规范的特异性顺序部分（以及该章节中的其他部分，!important 规则以及样式表中出现的规则顺序也会产生影响）。

- Quentin

0

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浏览器的"firebug"插件。它会准确地显示出每个元素被计算的属性以及原因，并强调层叠期间的覆盖。

- Roberto Aloi

0

!important
内联样式
#标识符
类
标签

- niranjan

这并没有提供问题的答案。如果要批评或请求作者澄清，请在他们的帖子下留言 - 您始终可以在自己的帖子上发表评论，并且一旦您拥有足够的声望，您将能够评论任何帖子。- 来自审查 - Sebastian Brosch

1

@sebastianbrosch 这为什么不算是一个回答的尝试呢？它可能是完全错误或格式不正确，但这并不意味着我们应该滥用审查队列来删除它。 - Undo

0

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

如果两个选择器具有相同的特定程度，则后面的选择器胜过前面的选择器。

有三个特定程度：id、class和元素。因此，#elem比.elem更具体，因为id更具体。.elem .cont比.elem更具体，因为它在同一级别上具有更多的选择器。

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

- Guffa

0

只有当选择器具有相同的特异性时，CSS 文件中的顺序才会有影响。

更多关于选择器特异性的信息： Andy Clarke 撰写了《特异性之战》，这是关于选择器如何工作的最佳概述。

- Paul Irish

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- bobince · Accepted Answer

规范中的详细细节实际上相当易读。总结如下：

!important 规则和内联 style 规则胜出。
否则，通常更具体的规则胜出。 #id 比 .classname 更具体，而 tagname 则更不具体。
如果规则同样具体，则最后声明的规则胜出。

没有特别的理由来阻止这种情况的发生。通常是指定一个大众化的规则，然后添加更具体的规则以针对某种情况；在单个元素上使用多个相同属性的规则并不罕见或不可取。