我的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 */
}
〜选择器(a.k.a.一般兄弟选择器)只选择纸杯蛋糕，猪仔：
.green_guys ~ p {
/* selects all <p> elements that follow .green_guys */
}
解决方法
没有兄弟的组合器看起来向后或周围，只有相邻和一般的兄弟组合器，期待。
最好的做法是确定一种方法，以限制选择只有这些p元素与同一父，然后选择p的子元素：not(.green_guys)。如果父元素的ID为#parent，例如，您可以使用此选择器：
#parent > p:not(.green_guys) {
/* selects all <p> children of #parent that are not .green_guys */
}
然而，上面的仍然会匹配你的p元素，即使他们没有类。目前不可能仅仅在存在所述元素的情况下选择元素的兄弟元素(这是兄弟元组合器的目的 – 建立两个兄弟元素之间的关系)。
Selectors 4’s :has()将希望纠正这一点，而不需要前面的同级组合器，导致以下解决方案：
p:has(~ .green_guys),.green_guys ~ p {
/* selects all <p> elements that are siblings of .green_guys */
}
如果父元素的所有子元素都没有类，则不会匹配任何内容。
