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>

CSS是否曾经关心过DOM的“紧密”关系？

2 个答案: