了解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>对某人来说，这是显而易见的，但对我来说却不是！是否存在一些指南或链接，我最终可以理解选择器优先级是如何工作的？
3 回答
慕的地10843
TA贡献1785条经验 获得超8个赞
选择器的特异性计算如下：
如果声明来自‘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(在一个大基数的数字系统中)的特性。
最后，按指定的顺序排序：如果两个声明具有相同的权重、来源和特异性，则后者将获胜。导入样式表中的声明被视为在样式表本身的任何声明之前。
.a.b<p class="a b">...</p><p class="b a">...</p>.a.b.
蝴蝶不菲
TA贡献1810条经验 获得超4个赞
<!-- 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>
#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;}- 3 回答
- 0 关注
- 529 浏览
相关问题推荐
添加回答
举报
0/150
提交
取消