元素的css shorth版本：悬停+元素+元素

Question

有工作示例：

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

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

jsfiddle

当鼠标悬停在第一个元素上时，第三个元素将产生结果。如果我需要更多+ +，则可以使用+ +的任何shorthen版本，例如.hov:hover+div:nth-child(2)-但这不起作用。

Answer 1

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

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

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

Answer 2

没有办法使您想做的事情更短。这只是选择器的工作方式。您提出的解决方案（element + next(3)或您希望在此处使用的任何语法）都不存在。

如果您更改HTML的结构（例如，在两者之间添加一个段落），则选择器会遇到一些问题。 Nisarg回答了您可以做的使您的代码更可靠的操作，并使用~选择器选择元素。

为什么不更改HTML并使其更可靠？您在这里所做的可能对您有所帮助，但是如果您对HTML进行更改，则CSS会中断。尝试为要选择的所有项目添加类别。不必担心元素上有三到四个类，那是完全正常的。

.hov:hover {
  color: red;
}

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