Question

我想了解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:white;
 }

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

对某些人来说，这可能是显而易见的，但不适合我！

是否存在一些指南或链接，我可以最终了解选择器优先级的工作原理？

Answer 1

我只是在链接到CSS 2.1规范本身，以及浏览器假设如何计算特异性：

CSS 2.1 Section 6.4.3：

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


如果声明来自的是1，则是一个'style'属性而不是带有选择器的规则，否则为0（= a）（在HTML中，元素的“style”属性的值是样式表规则。这些规则有没有选择器，所以a = 1，b = 0，c = 0，d = 0.）

计算选择器（= b）
中的ID属性数
计算选择器（= c）
中其他属性和伪类的数量
计算选择器中的元素名称和伪元素的数量（= d）

特异性仅基于选择器的形式。特别是，“[id = p33]”形式的选择器被计为属性选择器（a = 0，b = 0，c = 1，d = 0），即使id属性被定义为“ID” “在源文件的DTD中。


连接四个数字a-b-c-d（在具有大碱基的数字系统中）给出了特异性。

如果特异性相同，则CSS 2.1 Section 6.4.1开始发挥作用：

最后，按指定顺序排序：如果两个声明具有相同的权重，来源和特异性，则后者指定获胜。导入样式表中的声明被认为是在样式表本身中的任何声明之前。

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

Answer 2

您感兴趣的是specificity。

Firebug是一个很好的工具来帮助检查它。但是其他浏览器也有内置工具来检查应用的CSS规则。

Answer 3

元素

班级选择器

ID选择器

内联样式

！重要

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

Answer 4

您可以在此处参考完整答案Mozilla documentation

从最具体的开始： id选择器＆gt;类选择器＆gt;类型选择器（正常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;
}

Here's一个测试用例。

了解CSS选择器优先级/特异性

4 个答案: