- 首页
- 前端开发
- CSS 是否曾经关心过 DOM 的“紧密度"?关系?
CSS 是否曾经关心过 DOM 的“紧密度"?关系?
[英] Does CSS ever care about DOM "closeness" relationships?
本文介绍了CSS 是否曾经关心过 DOM 的“紧密度"?关系?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
给定以下代码:
div, span {填充:10px；显示:块；}.light-background {背景颜色:#cacaca;}.dark-background {背景色:#333；}.dark-背景跨度{白颜色;}.light-背景跨度{颜色:黑色;}
<div class="dark-background"><span>这是深色背景上的一些浅色文字.</span><div class="light-background"><span>这是浅色背景上的一些深色文本.</span>
<span>这是浅色背景上的一些深色文本.</span>
最内层的 span 与 .dark-background span 和 .light-background span 都匹配，所以似乎只与 CSS 有关系级联权重和最后一个规则定义的级联，并且永远不会在 HTML 中规则中的两个选择器彼此之间有多接近.
如果选择器匹配的元素比其他可能匹配的规则更接近彼此，是否可以应用规则?
解决方案
在解决您的问题(一般来说这是一个关于选择器匹配的高级问题)之前，让我们先解决您的实际问题.您真正要做的就是根据其父项是 .light-background 还是 .dark-background 来设置每个 span 的样式，而解决您的 CSS 中的问题的方法只是将后代组合器替换为子组合器:
.dark-background >跨度 {白颜色;}.light-background >跨度 {颜色:黑色;}
div, span {填充:10px；显示:块；}.light-background {背景颜色:#cacaca;}.dark-background {背景色:#333；}.dark-background >跨度 {白颜色;}.light-background >跨度 {颜色:黑色;}
<div class="dark-background"><span>这是深色背景上的一些浅色文字.</span><div class="light-background"><span>这是浅色背景上的一些深色文本.</span>
<span>这是浅色背景上的一些深色文本.</span>
除此之外，为什么您使用后代选择器的方法不能按预期开始工作?这就是我们转向您的问题的地方:
<块引用>
CSS 是否关心 DOM 的紧密度"关系?
不，匹配相同元素的复杂选择器仅通过特异性进行比较.并且特异性不考虑每个复合选择器匹配的元素的邻近性，因为这需要有关 DOM 的信息，而特异性从不根据有关 DOM 的任何信息计算.同样，组合子本身对特异性没有贡献.
给出以下示例:
<div class="B"><div class="C"></div><div class="D"></div><div class="E"></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 年内不会出现实施.
Given the following code:
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>
The inner-most span matches both .dark-background span as well as .light-background span, so there seems to only ever be a relationship to the CSS cascade weight and the last-rule-defined cascade, and never how close the two selectors in a rule are to each other in the HTML.
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?
解决方案
Before addressing your question, which is a high-level question about selector matching in general, let's get your actual problem out of the way. All you're really trying to do is style each span based on whether its parent is a .light-background or a .dark-background, and the solution for the problem in your CSS is simply to replace the descendant combinator with the child combinator:
.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>
With that out of the way, why does your approach with descendant selectors not work as expected to begin with? That's where we turn to your question:
Does CSS ever care about DOM "closeness" relationships?
No, complex selectors matching the same element are compared only by specificity. And specificity does not take into account the proximity of the elements matched by each compound selector, because this requires information about the DOM, and specificity is never calculated based on any information about the DOM. Likewise, combinators themselves do not contribute to specificity.
Given the following example:
<div class="A">
<div class="B">
<div class="C"></div>
<div class="D"></div>
<div class="E"></div>
</div>
</div>
In each of these pairs, both selectors match the same element and are equally specific; therefore the second rule will always take precedence over the first:
.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?
No, this is currently not possible. css-values-3 has a proposed feature called toggle() that will aid in solving problems that are somewhat similar to yours but not quite the same. But there hasn't been any interest in implementing it for the last several years, so it's been punted to level 4, and I don't expect implementations to surface for at least the next 5 years.
这篇关于CSS 是否曾经关心过 DOM 的“紧密度"?关系?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
