CSS Select 一次在 class 内增加跨度

Question

如何在 CSS 中 select 增加相同 class 的跨度？我特别需要它来悬停。

我试过 span.classname:hover .classname span:hover 第一个根本不起作用，第二个一次只对一个跨度起作用。

这是 html 的样子：

Answer 1

:hover 选择器将在悬停时应用于跨度。

如果您想在将鼠标悬停在某个元素上时突出显示该元素内的所有跨度，您需要向左移动 :hover 选择器：

    div.special:hover span {
        color: red;
    }

<div class="special">
    <span>Span</span> and another <span>Span</span>
</div>

当您将鼠标悬停在特殊 div 上时，这将应用于特殊 div 内的所有跨度。

如果你想让其他跨度在一个跨度悬停时激活，你将不得不编写脚本......你可以在 CSS 中获得的最接近的是通用兄弟选择器，它适用于跨度和在同一父级中跟随它的其他跨度。我想你也会希望它向后工作，但在这种情况下不会。

span:hover, span:hover ~ span {
  color: red;
}

<div>
    <span>Span</span> and another <span>Span</span>
</div>

CSS Select more span at once inside a class