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

我想了解CSS选择器如何处理属性冲突，如何选择属性而不是另一个属性？了解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>

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

是否存在一些指南或链接，我终于可以理解选择器优先级如何工作？

来源

2010-11-01 vitto

+10

http://www.w3.org/TR/CSS2/cascade.html#specificity – drudge 2010-11-01 19:28:22

我就扔在一个链接到CSS 2.1规范本身，以及浏览器应该如何计算特异性：

CSS 2.1 Section 6.4.3：

如下选择器的特殊性计算公式为：

如果声明来自于'样式'属性而不是带有选择器的规则，则计数1否则为0（= a）（在HTML中，ele的值ment的“样式”属性是样式表规则。这些规则没有选择器，因此a = 1，b = 0，c = 0和d = 0）。

计数选择器中ID属性的数量（= b）

计数其他属性和选择器中的伪类（= c）

计算选择器中元素名称和伪元素的数量（= d）

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

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

如果特异性是相等的，那么CSS 2.1 Section 6.4.1进场：

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

请注意，这是说什么时候风格被定义，而不是当它被使用。如果类.a和.b具有相同的特异性，则样式表中的最后定义为获胜。根据.a和.b的定义顺序，<p class="a b">...</p>和<p class="b a">...</p>的样式相同。

来源

2010-11-01 19:34:35 Benn

到目前为止的最佳解释：[链接]（http://css-tricks.com/specifics-on-css-specificity）当您向下滚动到“计算CSS特定性值”部分时，它开始变得非常有趣。 – 2014-07-10 15:35:14

但是，当两个特异性值相同时会发生什么？它是由哪个规则首先定义的？ – Boom 2016-02-02 21:12:45

这包含在https://www.w3.org/TR/CSS2/cascade.html#cascading-order中，特别是规则4，它在特定之后适用。我会编辑答案，以包括打破平局。 – Benn 2016-02-05 16:30:38

你感兴趣的是specificity。

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

来源

2010-11-01 19:29:03

Firebug是否有特定的（无双关语意图的）工具来分析特异性？不仅仅是违规规则的透视观点？ – 2010-11-01 19:45:38

@Pekka，不，不。尽管如此，仍然是这些类型的优秀工具。 – 2010-11-01 23:52:26

@Pekka在HTML选项卡的右侧，计算（？）选项卡（样式和外观之间）具有覆盖指令的另一个透视视图。比Style更有用，你可能指的是当你只有一个属性感兴趣时。 – FelipeAls 2013-03-24 21:36:25

元

类选择

ID选择

内联样式

！重要

为了，1是最低的特异性，5为最高。 https://youtu.be/NqDb9GfMXuo会显示详细资料来演示它。

来源

2016-03-29 00:33:17

为什么这是downvoted？ – AlexGH 2017-02-24 17:41:27

不确定，对我来说（如果准确的话）它是最简洁的。我有东西要做！ – 2017-05-03 15:52:21

您可以参考这里的完整的答案Mozilla documentation

开始从最具体： ID选择>类选择>类型选择（正常PH1，标签等..）重要的总是获胜，但这被认为是不好的做法。参见上面的链接。

的最好办法，就是与它的实验：

<!-- 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测试用例。

来源

2017-02-19 08:37:52

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

回答

相关问题