元素 :hover + element + element 的 css 短版本

Question

工作过的例子:

.hov:hover+.next+.result {
  color: red;
}

<div class="hov">hover</div>
<div class="next">next</div>
<div class="result">result</div>

jsfiddle

当悬停在第一个元素上时，第三个元素有结果。如果我需要更多 + +，可以使用 + + 的任何缩短版本，例如 .hov:hover+div:nth-child(2) -但这行不通。

Answer 1

+ 是 Adjacent sibling selector在 CSS 中，因此它要求两个选择器元素彼此相邻。相反，您可以使用 ~ 这是 General Sibling selector在这里，这不需要两个元素彼此相邻。

.hov:hover ~ .result {
  color: red;
}

<div class="hov">hover</div>
<div class="next">next</div>
<div class="result">result</div>