我的 HTML：
<p>Doggies</p>
<p class="green_guys">Froggies</p>
<p>Cupcakes</p>
<p>Piggies</p>
当用于选择 green_guys 的兄弟姐妹时，一个全包的兄弟姐妹选择器（如我所愿）将选择 doggies 纸杯蛋糕和小猪。
其他选择器：
+ 选择器（又名相邻兄弟选择器）只会选择纸杯蛋糕：
.green_guys + p {
/* selects the <p> element that immediately follows .green_guys */
}
~ 选择器（又名通用兄弟选择器）只会选择纸杯蛋糕和小猪：
.green_guys ~ p {
/* selects all <p> elements that follow .green_guys */
}
【问题讨论】：
标签： css css-selectors
没有向后或向后看的兄弟组合子，只有向前或向前看的相邻和一般兄弟组合子。
您可以做的最好的事情是确定一种方法，将选择仅限于具有相同父级的这些p 元素，然后选择:not(.green_guys) 的p 子级。例如，如果父元素的 ID 为 #parent，则可以使用此选择器：
#parent > p:not(.green_guys) {
/* selects all <p> children of #parent that are not .green_guys */
}
但是，即使 none 元素具有该类，上述内容仍将匹配您的 p 元素。目前不可能仅在给定元素的 存在 的情况下选择该元素的兄弟姐妹（这是兄弟组合器的目的 - 建立 两个 兄弟之间的关系元素）。
Selectors 4's :has() 有望在不需要前置兄弟组合器的情况下纠正此问题，从而产生以下解决方案：
p:has(~ .green_guys), .green_guys ~ p {
/* selects all <p> elements that are siblings of .green_guys */
}
如果父元素的所有子元素都没有该类，这将不匹配任何内容。
【讨论】：
+ 将重命名为 "next-sibling combinator"。保留原意，“following”一词比“next”更笼统，但现在说明顺序。
我不知道。也没有siblings 选择器。
这可能有效：
#parent_of_green_guys > p:not(.green_guys) {
foo: bar;
}
或者，如果您不是在寻找具有class 属性的ps：
#parent_of_green_guys > p:not([class]) {
foo: bar;
}
【讨论】：
我的场景有点不同，但我想选择一个输入元素的同级元素，以便在它处于活动状态时显示一个，而在它无效时显示另一个。
我的html是这样的，我无法选择无效的文本。
<input name="importantAnswer">
<div class="help-text"></div>
<div class="invalid-text"></div>
我能够通过将兄弟姐妹嵌入到相邻的兄弟姐妹中并在其上使用子选择器来绕过它。
<input name="importantAnswer">
<div class="messages">
<div class="help-text"></div>
<div class="invalid-text"></div>
</div>
.help-text, .invalid-text {
visibility:hidden;
}
.input:active +.messages > .help-text {
visibility:visible;
}
.input.invalid:visited +.messages > .invalid-text {
visibility:visible;
}
它奏效了。
【讨论】：
我实际上找到了 3 种方法来做到这一点：
解决方案 1
.parent > p:not(.green_guys) {
text-decoration: line-through; /* or whatever you like */
}
演示： https://jsbin.com/cafipun/edit?html,css,output
优点：快速简单。
缺点：您需要知道父选择器（所以这不是一个超级便携的解决方案）。
解决方案 2
p ~ p:not(.green_guys),
p:first-child:not(.green_guys) {
text-decoration: line-through; /* or whatever you like */
}
演示： https://jsbin.com/seripuditu/edit?html,css,output
优点：不需要知道父选择器（在一般情况下使用它会非常好）。
缺点：过于笼统会有风险（例如，如果您的 HTML 周围有其他 p，请小心！）。
解决方案 3
解决方案 2 的小变体（避免 CONS）。在这种情况下，您指定同级选择器以获得更具体的上下文。
p.siblings ~ p:not(.green_guys),
p.siblings:first-child:not(.green_guys) {
text-decoration: line-through; /* or whatever you like */
}
演示： https://jsbin.com/hakasek/edit?html,css,output
优点：它是一个可移植的解决方案，不需要知道父选择器（在一般情况下它可以很好）并且不用担心与其他元素发生冲突。
缺点：必须明确定义所有兄弟姐妹（例如，使用类或属性）。
【讨论】：