我想了解CSS选择器如何处理属性冲突。如何选择一项财产而不是另一项财产？




 div {
  background-color: red;
}

div.my_class {
  background-color: black;
}

div#my_id {
  background-color: blue;
}

body div {
  background-color: green;
}

body>div {
  background-color: orange;
}

body>div#my_id {
  background-color: pink;
} 

 <div id="my_id" class="my_class">hello</div>





选择器优先级如何工作？

评论

w3.org/TR/CSS2/cascade.html#specificity

#1 楼

我将仅介绍CSS 2.1规范本身的链接，以及浏览器应如何计算特异性：
CSS 2.1第6.4.3节：

选择器的特异性如下计算：

计算1（如果声明来自）是'style'属性，而不是带有选择器的规则，否则为0（否则==）（在HTML中，元素的“ style”属性的值是style工作表规则。这些规则没有选择器，因此a = 1，b = 0，c = 0和d = 0。）
计算选择器中ID属性的数量（= b）
count选择器中其他属性和伪类的数量（= c）
选择器中元素名称和伪元素的数量（= d）
特异性仅基于形式选择器。特别是，即使将id属性定义为“ ID”，形式为[[id = p33]”的选择器也被视为属性选择器（a = 0，b = 0，c = 1，d = 0）在源文档的DTD中。”

将四个数字abcd（在一个基数较大的数字系统中）连接起来将给出特异性。

如果特异性相同，则CSS 2.1第6.4.1节开始起作用：最后，按指定的顺序排序：如果两个声明的权重，来源和特异性相同，则以后者为准。导入的样式表中的声明被认为是在样式表本身中的任何声明之前。


请注意，这是在定义样式时，而不是在使用时。如果类.a和.b具有相同的特异性，则以样式表中最后定义的那个为准。根据<p class="a b">...</p>和<p class="b a">...</p>的定义顺序，.a和.b的样式将相同。

评论

迄今为止最好的解释：链接当您向下滚动到“计算CSS特异性值”部分时，它开始变得非常有趣。

–佩德罗·莫雷拉（Pedro Moreira）
2014年7月10日15:35
但是，当两个特异性值相同时会发生什么？它首先遵循哪个规则？

–景气
16年2月2日在21:12
这是w3.org/TR/CSS2/cascade.html#cascading-order所涵盖的，尤其是规则4，该规则适用于特定性。我将编辑答案以包含平局。

–贝恩
16年5月5日在16:30
@Boom：如果有多个相同的特异性规则，则应用样式表中最后出现的规则。希望这可以帮助。

–鸡蛋匠
18年3月8日在17:47

#2 楼



元素
类选择器
ID选择器
内联样式
！important



在顺序，最低的特异性是1，最高的是5。
https://youtu.be/NqDb9GfMXuo将显示详细信息以进行演示。

#3 楼

您感兴趣的是特异性。

Firebug是一个很好的工具，可以帮助您检查这一点。但是其他浏览器还内置了用于检查所应用的CSS规则的工具。

评论

Firebug是否具有用于分析特异性的特定工具（无双关语）？不仅仅是删除规则的删除线视图？

– Pekka
2010年11月1日19:45


@Pekka，不，不是。但是，对于这些类型的事情仍然是一个出色的工具。

–詹森·麦克雷里（Jason McCreary）
2010年11月1日23:52


@Pekka在HTML选项卡的右侧，“计算的（？）”选项卡（在“样式”和“外观”之间）具有另一个覆盖指令的删除线视图。仅当您对ONE属性感兴趣时，它可能比您可能引用的Style中的样式有用。

–FelipeAls
13年3月24日在21:36

#4 楼

您可以在此处参考完整的答案Mozilla文档

从最具体的内容开始：
id选择器>类选择器>类型选择器（普通的h1，p标记等。）

最好的方法是尝试一下：



  <!-- start class vs id -->
  <p class="class1" id="id1">.class vs #id: The winner is #id</p>

  <!-- upper vs bottom -->
  <p id="id2">the very bottom is the winner</p>

  <!--most specific is the winner -->
  <p id="id3">the most specific</p>

  <!--pseudo and target selector -->
  <h3>pseudo vs type selector</h3>

  <!-- !important is more important! -->
  <h1 id="very-specific">HI! I am very important!</h1>
  </body>


CSS：

#id1{
    color: blue;
}

.class1{
    color: red;
}

#id2{
    color: yellow;
}

#id2{
    color : green;
}

body p#id3{
    color :orange;
}

body p{
    color : purple;
}

body{
    color : black;
}

h3::first-letter {
    color: #ff0000;

}

h3{
    color: CornflowerBlue ; 
}

h1{
    color: gray !important;
}

body h1#very-specific{
    color: red;
}


这里是一个测试用例。