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

给定以下代码：

div，span{
填充：10px；
显示：块；
}
.浅色背景{
背景色：#cacaca；
}
.暗背景{
背景色：#333；
}
.暗背景跨度{
颜色：白色；
}
.浅色背景跨度{
颜色：黑色；
}

下面是一些深色背景上的浅色文本。
这是一些浅背景上的深色文本。
这是一些浅背景上的深色文本。

在回答您的问题之前（这是一个关于选择器匹配的高级问题），让我们先把实际问题排除在外。您真正想要做的就是根据父对象是

.light background

还是

.dark background

来设置每个

span

的样式，解决CSS中问题的方法就是用子组合器替换子组合器：

.dark background>span{
颜色：白色；
}
.灯光背景>跨度{
颜色：黑色；
}

div，span{
填充：10px；
显示：块；
}
.浅色背景{
背景色：#cacaca；
}
.暗背景{
背景色：#333；
}
.暗背景>跨度{
颜色：白色；
}
.灯光背景>跨度{
颜色：黑色；
}

下面是一些深色背景上的浅色文本。
这是一些浅背景上的深色文本。
这是一些浅背景上的深色文本。

如果您重新订购声明，您将看到文本颜色变化。以后的定义会覆盖更早的定义

您可以使用

操作符稍微限制您的选择

#main>span

将只匹配

#main

下一个span；

+

选择器选择dom中的下一个同级在该类型的选择中/周围有第n个子项。这就是你所说的：

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

div，span{
填充：10px；
显示：块；
}
.浅色背景{
背景色：#cacaca；
}
.暗背景{
背景色：#333；
}
.浅色背景跨度{
颜色：黑色；
}
.暗背景跨度{
颜色：白色；
}

下面是一些深色背景上的浅色文本。
这是一些浅背景上的深色文本。
这是一些浅背景上的深色文本。

也许您正在选择器中查找

或

~

？但是没有，没有“关闭”元素的特定选择器您首先需要定义“关闭”。对我来说，两者都是紧密相等的。我所说的“亲密”是指更直接的后代。例如，不遵循规则的span（第一个span）在DOM中的层次结构为

.light background.dark background span

，但尽管“最接近”的html结构为

.dark background span

，但，这被忽略，因为选择器

。浅背景span

是在

之后定义的。深背景span

是该选择器的直接后代
表示“XY问题”是Z问题。让我们不要重复这种迟钝。@Jan Kyu Peblik:我曾考虑过完全忽略这个例子，并根据问题本身的优点来解决这个问题，但我认为他们包括他们的例子是有原因的，不管它与他们的问题有多么分离。我可以删除我称之为XY问题的声明，但它仍然不会改变问题的性质，也不会改变我现在的答案。它会改变在你的问题中包含这一点废话，这将是非常好的。@Jan Kyu Peblik:好的，我已经删除了。谢谢。21