了解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>
炎炎设计浏览 561回答 3
3回答
-
慕的地10843
我将只提供一个指向CSS2.1规范本身的链接，以及浏览器是如何运行的。假想为了计算专一性：CSS 2.1 6.4.3节:选择器的特异性计算如下：如果声明来自‘Style’属性，而不是带有选择器的规则，则0否则(=a)(在HTML中，元素的“样式”属性的值是样式表规则)。这些规则没有选择器，因此a=1，b=0，c=0，d=0。计数选择器中的ID属性数(=b)计数选择器中其他属性和伪类的数量(=c)计算选择器中元素名和伪元素的数量(=d)其特异性仅以选择器的形式为基础。特别是，表单“[id=p33]”的选择器被计算为属性选择器(a=0，b=0，c=1，d=0)，即使id属性在源文档的DTD中被定义为“ID”。比较四个数字a-b-c-d(在一个大基数的数字系统中)的特性。如果特性相等，那么CSS 2.1 6.4.1节发挥作用：最后，按指定的顺序排序：如果两个声明具有相同的权重、来源和特异性，则后者将获胜。导入样式表中的声明被视为在样式表本身的任何声明之前。请注意，这是在定义样式时，而不是在使用样式时。IF类.a和.b具有相同的特异性，以最后定义的为准。在样式表中赢了。<p class="a b">...</p>和<p class="b a">...</p>的定义顺序，样式相同。.a和.b. -
蝴蝶不菲
你可以参考这里的完整答案。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;}这是一个测试用例。
随时随地看视频慕课网APP
Html/CSS
Html5
CSS3