如果其中一个具有特定类，则选择所有兄弟姐妹[重复]答案

【问题标题】：Select all siblings if one of them has a specific class [duplicate]如果其中一个具有特定类，则选择所有兄弟姐妹[重复]
【发布时间】：2018-12-11 22:22:39
【问题描述】：

RE: 以上关于重复 - 我的问题是询问是否有办法选择子元素内部的所有元素，其中一个类存在于纯 CSS 中，而该链接问题只是询问是否存在与+ 选择器相反，这不是我要/寻找的。这应该没有被标记为重复。

主要问题：

如果其中一个兄弟姐妹具有特定的类，我想选择父级中的所有元素。我该怎么做呢？我试过了：

https://www.w3schools.com/cssref/sel_gen_sibling.asp

element1~element2 选择器匹配出现的 element2 以 element1 开头。

但这不是我想要的。

CSS sibling selectors (select all siblings)

我的问题不是重复的，因为该类位于上述问题的第一个元素中，这使它起作用。

见下文：

.red ~ .item {
  background-color: red;
}

<ul>
<li class="item red">list item</li>
<li class="item">list item</li>
<li class="item">list item</li>
<li class="item">list item</li>
<ul>

<ul>
<li class="item">list item</li>
<li class="item">list item</li>
<li class="item red">list item</li>
<li class="item">list item</li>
<ul>

如果其中一个有纯 CSS 的类，你如何选择所有兄弟姐妹？还是我需要使用JS？

【问题讨论】：

你可以使用 JavaScript
你应该必须为此使用 JavaScript，因为 CSS 没有先前的兄弟选择器。
@j08691 好的，很高兴知道，谢谢
stackoverflow.com/questions/1817792/…
为什么这会被标记为重复并被否决？我在问是否有一种方法可以选择所有元素，其中一个类存在于一个孩子中，而这个问题只是询问是否有以前的选择器。有没有办法对此提出异议？

标签： html css

【解决方案1】：

使用 jQuery 获取兄弟姐妹，然后将 red 类应用于它们。

$( "li.item.red" ).siblings().addClass("red");

.red {
background-color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li class="item red">list item</li>
<li class="item">list item</li>
<li class="item">list item</li>
<li class="item">list item</li>
<ul>

<ul>
<li class="item">list item</li>
<li class="item">list item</li>
<li class="item red">list item</li>
<li class="item">list item</li>
<ul>

【讨论】：

【解决方案2】：

对于这种特殊情况，如果您想为所有元素应用背景，您可以考虑将一个伪元素覆盖所有元素作为背景层：

ul {
  position: relative;
  z-index: 0;
}

.red:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 40px;
  right: 0;
  bottom: 0;
  background-color: red;
}

<ul>
  <li class="item red">list item</li>
  <li class="item">list item</li>
  <li class="item">list item</li>
  <li class="item">list item</li>
</ul>

<ul>
  <li class="item">list item</li>
  <li class="item">list item</li>
  <li class="item red">list item</li>
  <li class="item">list item</li>
</ul>

【讨论】：