Question

这个html：

<html>
<head>
<style>
    #outter_div .span_class a {background: red;}
    #inner_div span a {background: blue;}
</style>
</head>
<body>

<div id='outter_div'>
<div id='inner_div'>
    <span id='span_id' class='span_class'><a href='index.html'>link</a></span>
</div>
</div>

</body>
</html>

导致RED链接。

如果我们将第一行css更改为

#span_id a {background: red;}

链接变为蓝色。

但#outter_div .span_class a和#span_id a都指向相同的元素。

这种差异来自哪里？当一切都相同时，为什么颜色会发生变化？

Answer 1

您知道如何以数学方式计算CSS选择器的具体权重吗？

阅读本文。

how to mathematically calculate the specific weight of your CSS selectors

回到你的问题。

#span_id a {background: red;}

1,0,1

#inner_div span a {background: blue;}

1,0,2

因此，链接为蓝色。

因为

之前是红色的

#outter_div .span_class a {background: red;}

1,1,1

Answer 2

差异来自于CSS Specificity。

这是一个概念，允许您根据您使用的特定类型的选择器的数量在逻辑上优先排序CSS规则 - ID选择器具有最大的特异性，元素选择器具有最少的。

例如，两个选择器选择HTML标记<h1 id="one" class="one">...</h1>：

#one{
    color: red;
}
.one{
    color: blue;
}
h1{
    color: green;
}

会出现红色。移除#one选择器现在会显示蓝色，最后，移除.one选择器会使其显示为绿色。

更改为相同的css路径显示不同的结果

2 个答案: