CSS 曾经关心过 DOM "closeness" 关系吗？

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>

既然如此，为什么您使用后代选择器的方法一开始就无法正常工作？这就是我们转向您的问题的地方：

Does CSS ever care about DOM “closeness” relationships?

不，匹配相同元素的复杂选择器仅根据特异性进行比较。而specificity并没有考虑每个复合选择器匹配的元素的接近度，因为这需要DOM的信息，而specificity是never根据任何信息计算出来的 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 {}

Is it possible to apply a rule if the elements matched by the selector are closer to each other than other rules which may match?

不，这目前是不可能的。 css-values-3 有一个名为 toggle() 的拟议功能，可帮助解决与您的问题有些相似但又不完全相同的问题。但是在过去的几年里没有人有兴趣实施它，所以它被降到了 4 级，我预计至少在接下来的 5 年内不会出现实施。

Answer 2

如果重新排序声明，您会看到文本颜色发生变化。后面的定义覆盖前面的定义。

您可以使用 > 运算符稍微限制您的选择 #main > span 将仅匹配 #main 正下方的范围，+ 选择器选择下一个兄弟dom。并且您有 nth-child in/around 那种类型的选择。这是你的意思吗:

Is it possible to apply a rule if the elements matched by the selector are closer to each other than other rules which may match?

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 "closeness" 关系吗？

Does CSS ever care about DOM "closeness" relationships?

html

css

css-selectors

css-specificity

css-cascade