Question

我已经四处寻找有关此信息，但由于我不确定该过程的技术名称，我似乎无法找到答案。

我想说：

.some_class {}
.some_class .sub_div {}

<div class="some_class">
  <div class="intermediate_div">
    <div class="sub_div">

根据我的理解，选择器.some_class .sub_div应该应用于div＆quot; sub_div＆＃39;。但似乎并非如此，因为我总是要回去将其更改为＆＃39; .some_class .intermediate_div .sub_div＆＃39;。

这是正确的还是我错过了什么？

我的印象是.some_class .sub_div应该适用于.some_class元素中.sub_div的任何实例。

Answer 1

.some_class .sub_div可以毫无困惑地工作。但你确实.some_class .intermediate_div .sub_div可行，但.some_class .sub_div因为css特异性而无法正常工作。

请看下面的例子：

div.intermediate_div .sub_div {
   color: red;
}
.some_class .sub_div {
   color: blue;
}

您认为蓝色应用的是什么？不会。应用红色是因为div.intermediate_div .sub_nav比.some_class .sub_div具有更高的特异性，因此在这种情况下您可能想知道

.some_class .intermediate_div .sub_div{
   color: blue;
}

的工作原理。因为它比以前的选择器更具特异性。

详细了解css特异性here和我的previous answer。

Answer 2

CSS会将最具体的规则应用于每个元素。在两个同样具体的规则的情况下，它将应用最后定义的规则。

查看this fiddle，它使用以下html：

<div class="some_class">
    Some class
    <div class="intermediate_div">
        Intermediate
        <div class="sub_div">Sub Div</div>
    </div>
</div>

和这个CSS：

.some_class {
    color: red;
}
.intermediate_div {
    background-color: blue;
}
.intermediate_div .sub_div {
    background-color: orange;
}
.some_class .sub_div {
    background-color: green;
}

所有文本都是红色的，因为some_class是红色的，而div中的所有内容都继承了该样式。

intermediate_div有一个蓝色背景，由sub_div继承。但是sub_div定义了两个更具体的规则。

这两个具有两个类选择器的规则同样具体。两者都比蓝色背景更具体，因为它们选择基于两个类而不是一个。橙色背景被忽略，因为最后定义的规则在它们具有同等特异性时使用。

当你使用一个元素id时，它比一个类更具体，因为id（应该是）唯一的。所以在this modified fiddle中，你可以看到sub_div从＃div1获取样式，即使该规则是首先定义的，只有一个选择器。它仍然优先于后面定义的规则和带有两个选择器的规则，因为它使用唯一的id。

CSS选择器如何实际工作？

2 个答案: