CSS选择器实际上是如何工作的？

我四处寻找了有关这方面的信息，但由于我不确定该过程的技术名称，我似乎找不到答案

假设我有：

.some_class {}
.some_class .sub_div {}

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

根据我的理解，选择器.some_class.sub_div应该应用于div'sub_div'。但情况似乎并非如此，因为我总是要返回并将其更改为“.some_class.intermediate_div.sub_div”

这是正确的还是我遗漏了什么

我的印象是.some-class.sub-div应该应用于.some-class元素中.sub-div的任何实例。

。some-class.sub-div可以毫无疑问地工作。但事实上你是对的。一些类。中间类。子类可以工作，但一些类。子类不会，因为css的特殊性

下面是一个例子：

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

你认为蓝色是什么颜色？不。之所以使用红色，是因为div.intermediate\u div.sub\u nav比.some\u class.sub\u div的特异性更高，因此在这种情况下，您可能会感到奇怪

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

工作。因为它比以前的选择器有更多的特异性

请在my中进一步了解css的特殊性。

css将对每个元素应用最具体的规则。 如果有两条同样具体的规则，它将应用最后定义的规则

看一看，它使用以下html：

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

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

中间div有一个蓝色的背景，它将被subdiv继承。但是subdiv定义了两个更具体的规则

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

---

当您使用元素id时，它比类更具体，因为id应该是唯一的。因此，在中，您可以看到sub_div采用div1中的样式，即使该规则是首先定义的，并且只有一个选择器。它仍然优先于稍后定义的规则和带有两个选择器的规则，因为它使用唯一的id。

谢谢您的回答。我了解选择器的特殊性。这就是为什么我感到困惑的原因。当.some_class和.sub_div+1之间有1个或多个已分类元素时，some_class.sub_div不适用于.sub_div，但可能值得添加一个链接或简要解释特殊性，以及它在技术上的工作原理，包括元素和id选择器的权重，而不仅仅是这个特殊情况。你可以在我之前有趣的博文德拉的回答中了解css的特殊性。尤其是ID如何胜过类。当然，这很有道理，只是以前从未想过。不幸的是，我现在仍然没有。当我试着用的时候。一些课。sub_类，.sub_类元素不会受到影响，除非我在.some_类和.sub_类之间添加中间类。听起来你是说如果我有.some_类。sub_div{background color:red；}，然后在.class.sub_div的某个类中的任意位置添加一个div，该类将具有红色背景。但当我试图以这种方式构建它时，我并没有发现这一点。当我以这种方式构建它时，.sub_div没有红色背景，除非我在选择器中添加.sub_intermediate。是的，如果我理解正确，这就是你应该得到的-检查这个提琴：如果你没有得到相同的结果，你能发布一个它没有按预期工作的示例吗？哇！不幸的是，我没有任何例子，因为这是我很久以前“发现”的东西，从那时起，我一直在构建这些过长的选择器。我现在问这个问题是因为我现在已经更多地使用了css选择器，并且对它们有了更好的理解，但是我不明白为什么这不起作用。既然您已经证明它应该可以工作，我将在下一个项目中再试一次。谢谢，到底是什么不起作用？用HTML和CSS显示一个实际的例子，并清楚地说明a所期望的是什么，b我们如何看到它不起作用。请不要使用荒谬的标题；每个人都知道CSS选择器实际上是有效的，只是CSS有一些特定的问题。

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