gpt4 book ai didi

css - 具有封闭类特异性的相邻兄弟选择器

转载 作者:行者123 更新时间:2023-12-05 01:20:01 25 4
gpt4 key购买 nike

我有这个 DOM:

<div class="a">
<div class="b"></div>
<div class="c"></div>
</div>

我想要这个 css 规则:

.b + .c { margin-left: 220px; }

但仅限于类 a

我希望这样的事情会奏效,但运气不好。

.a .b + .a .c {}

有谁知道这是否可能?

最佳答案

改用这个选择器:

.a .b + .c {
margin-left: 220px;
}

... 或 .a > .b + .c,如果您希望规则仅应用于 .a 容器的子容器,而不是应用于它的所有后代。

Demo .

现在进行解释部分。如 CSS spec 中所定义,每个带有 + 符号的选择器都被视为选择器链:

A selector consisting of a single simple selector matches any element satisfying its requirements. Prepending a simple selector and combinator to a chain imposes additional matching constraints, so the subjects of a selector are always a subset of the elements matching the last simple selector.

现在分析您开始使用的表达式:

.a .b + .a .c

根据规范,这实际上被视为...

((.a .b) + .a) .c

换句话说,选择器被应用...

  • 所有的 .c 元素,它...
  • ... 有 .a 元素作为它们的祖先,它们...
  • ...... 有 .b 元素作为它们前面的 sibling ,它们......
  • .............有 .a 元素作为他们的祖先。

此选择器将匹配此 HTML 中的 .c 元素:

<div class="a">
<div class="b"></div>
<div class="a">
<div class="c">This is matched</div>
</div>
</div>

但是,在您的情况下,您不必检查 .c 祖先 - 仅检查 .b(它的前一个兄弟)就足够了。如果 .b 在其 DOM 树中有 .a,那么它的 sibling 肯定也有。 )

关于css - 具有封闭类特异性的相邻兄弟选择器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19717677/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com