是否有“全包兄弟” CSS选择器之类的东西？

一尘不染

css

我的HTML：

<p>Doggies</p>
<p class="green_guys">Froggies</p>
<p>Cupcakes</p>
<p>Piggies</p>

当用于选择green_guys的兄弟姐妹时，一个全包兄弟姐妹选择器（如我希望的那样）将选择小狗纸杯蛋糕和小猪。

其他选择器：

该+选择器（又名 相邻兄弟选择器 ）将仅选择蛋糕：

.green_guys + p {
    /* selects the <p> element that immediately follows .green_guys */
}

该~选择器（又名 一般兄弟选择 ）将只能选择蛋糕，和小猪：

.green_guys ~ p {
    /* selects all <p> elements that follow .green_guys */
}

阅读 209

2020-05-16

共1个答案

一尘不染

没有向后或向后看的同级组合器，只有向前看的相邻和普通同级组合器。

您能做的最好的事情就是确定一种方法，将选择仅限制于p具有相同父元素的这些元素，然后选择p子元素:not(.green_guys)。#parent例如，如果父元素的ID为，则可以使用以下选择器：

#parent > p:not(.green_guys) {
    /* selects all <p> children of #parent that are not .green_guys */
}

但是，p即使它们都不包含类，上述内容仍将与您的元素匹配。当前仅在存在
元素的同级元素的情况下才可能选择该元素的同级元素（这是同级组合器的目的-在两个同级元素之间建立关系）。

选择器4:has()希望可以纠正此问题，而无需先前的同级组合器，从而产生以下解决方案：

p:has(~ .green_guys), .green_guys ~ p {
    /* selects all <p> elements that are siblings of .green_guys */
}

如果父元素的所有子元素都没有该类，则此内容将不匹配。

2020-05-16