CSS是否关心DOM“亲密”关系？

Question

给出以下代码：

div, span {
  padding: 10px;
  display: block;
}

.light-background {
  background-color: #cacaca;
}

.dark-background {
  background-color: #333;
}

.dark-background span {
  color: white;
}

.light-background span {
  color: black;
}

<div class="light-background">
  <div class="dark-background">
    <span>Here is some light text on a dark background.</span>
    
    <div class="light-background">
      <span>Here is some dark text on a light background.</span>
    </div>
  </div>
  <span>Here is some dark text on a light background.</span>
</div>

最里面的范围与.dark-background span和.light-background span都匹配，因此似乎只与CSS级联权重和最后规则定义的级联有关系，并且规则中的两个选择器之间的距离永远不会相互接近在HTML中。

如果选择器匹配的元素比可能匹配的其他规则彼此更接近，是否可以应用规则？

Answer 1

在解决您的问题之前，这是一个关于选择器匹配的高级问题，让我们将您的实际问题排除在外。所有你真正想做的就是根据它的父级是span还是.light-background来设置每个.dark-background的样式，而CSS中问题的解决方案只是用子组合子替换后代组合子：

.dark-background > span {
  color: white;
}

.light-background > span {
  color: black;
}

div, span {
  padding: 10px;
  display: block;
}

.light-background {
  background-color: #cacaca;
}

.dark-background {
  background-color: #333;
}

.dark-background > span {
  color: white;
}

.light-background > span {
  color: black;
}

<div class="light-background">
  <div class="dark-background">
    <span>Here is some light text on a dark background.</span>
    
    <div class="light-background">
      <span>Here is some dark text on a light background.</span>
    </div>
  </div>
  <span>Here is some dark text on a light background.</span>
</div>

有了这个，为什么你的后代选择器的方法不能按预期开始工作？这就是我们转向你问题的地方：

CSS是否关心DOM“亲密”关系？

不，仅通过特异性比较匹配相同元素的复杂选择子。并且特异性没有考虑每个化合物选择器匹配的元素的接近度，因为这需要关于DOM的信息，并且永远不会基于关于DOM的任何信息来计算特异性。同样，组合子本身对特异性没有贡献。

给出以下示例：

<div class="A">
  <div class="B">
    <div class="C"></div>
    <div class="D"></div>
    <div class="E"></div>
  </div>
</div>

在这些对中的每一对中，两个选择器匹配相同的元素并且具有相同的特定性;因此，第二条规则将始终优先于第一条规则：

.B .C   {}
.B > .C {}

.B > .C {}
.B .C   {}

.A .C   {}
.B .C   {}

.B .C   {}
.A .C   {}

.D ~ .E {}
.D + .E {}

.D + .E {}
.D ~ .E {}

.C ~ .E {}
.D ~ .E {}

.D ~ .E {}
.C ~ .E {}

如果选择器匹配的元素比可能匹配的其他规则彼此更接近，是否可以应用规则？

不，这目前是不可能的。 css-values-3有一个名为toggle()的提议功能，它有助于解决与你的问题有些相似但不完全相同的问题。但是在过去的几年中没有任何兴趣实现它，所以它被推到了4级，我不希望实现至少在未来5年内出现。

Answer 2

如果重新排序声明，您将看到文本颜色更改。后来的定义会更快地覆盖。

您可以使用>运算符来限制您的选择#main > span将仅匹配#main下面的跨度，+选择器选择dom中的下一个兄弟。你在这种选择中/周围有nth-child。这是你的意思：

如果选择器匹配的元素比可能匹配的其他规则彼此更接近，是否可以应用规则？

div, span {
  padding: 10px;
  display: block;
}

.light-background {
  background-color: #cacaca;
}

.dark-background {
  background-color: #333;
}

.light-background span {
  color: black;
}

.dark-background span {
  color: white;
}

<div class="light-background">
  <div class="dark-background">
    <span>Here is some light text on a dark background.</span>
    
    <div class="light-background">
      <span>Here is some dark text on a light background.</span>
    </div>
  </div>
  <span>Here is some dark text on a light background.</span>
</div>