CSS 加上多个选择器

Question

当在 CSS 中为兄弟 select 或使用加号 (+) 时，有没有办法 select 多个元素？

例如，这将为第二个内部 div:

的背景着色

.item1:hover + .item2 div {
  background: red;
}

<div>
<div class="item1">
  <div>Hover me please</div>
</div>
<div class="item2">
  <div>Color me please</div>
</div>

<div class="item3">
  <div>Color me two please</div>
</div>

</div>

但我也想 select .item3 div。我这样试过，但那行不通：

.item1:hover + .item2 div + .item3 div {
  background: red;
}

<div>
<div class="item1">
  <div>Hover me please</div>
</div>
<div class="item2">
  <div>Color me two please</div>
</div>

<div class="item3">
  <div>Color me three please</div>
</div>

</div>

为此我必须使用 JS 还是缺少 CSS 方式？

Answer 1

~ :is() @supports

.item1:hover ~ .item2 div,
.item1:hover ~ .item3 div {
  background: red;
}

@supports selector(:is()) {
  .item1:hover~ :is(.item2, .item3) div {
    background: orange;
  }
}

<div class="item1">
  <div>Hover me please</div>
</div>
<div class="item2">
  <div>Color me two please</div>
</div>
<div class="item3">
  <div>Color me three please</div>
</div>

Answer 2

adjacent sibling selector (+) will only select the element directly following-- you want the general sibling combinator (~)。请参阅下面的示例：

.item1:hover ~ .item2 div,
.item1:hover ~ .item3 div {
  background: red;
}

<div>
<div class="item1">
  <div>Hover me please</div>
</div>
<div class="item2">
  <div>Color me two please</div>
</div>

<div class="item3">
  <div>Color me three please</div>
</div>

</div>

（对于它的价值，, but also makes selection more succinct by leveraging the :is() pseudo-class。）

更新

关于：

They are both great solutions, although I just noticed one more thing, if I want to hover 2nd element to color 1st and 3d, in that scenario both of your solutions won't catch the 1st element. In other words, the elements that are behind the hovered element, won't react to this.

这与原始问题中所述的情况略有不同。据我所知，获得 previous 与 CSS 兄弟姐妹仍然是不可能的。但是，我们可以通过在包装器悬停时为所有目标后代着色，然后重置当前悬停的后代来欺骗它。请参阅下面的示例：

.outer-wrapper:hover > div > div {
  background-color: red;
}

.outer-wrapper > div > div:hover {
  background-color: initial;
}

<div class="outer-wrapper">
  <div class="item1">
    <div>Hover me please</div>
  </div>
  <div class="item2">
    <div>Color me two please</div>
  </div>

  <div class="item3">
    <div>Color me three please</div>
  </div>
</div>

Answer 3

试试下面的代码

.item1:hover ~ :is(.item2, .item3) div {
  background: red;
}

<div>
<div class="item1">
  <div>Hover me please</div>
</div>
<div class="item2">
  <div>Color me two please</div>
</div>

<div class="item3">
  <div>Color me three please</div>
</div>

</div>

CSS 加上多个选择器

CSS plus with multiple selectors

css

selector

更新