1

给定以下代码：

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。

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

4

2 回答 2

2

在解决您的问题之前，这是一个关于选择器匹配的高级问题，让我们先解决您的实际问题。您真正要做的只是span根据其父项是 a.light-background还是 a.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 年内实施不会浮出水面。

于 2018-11-12T07:32:48.777 回答
0

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

您可以使用>运算符来限制您的选择，#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>

于 2018-11-12T07:48:17.270 回答