Question

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？

Answer 1

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

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>

Answer 2

使用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 个答案: