这个奇怪的 CSS 语法是什么？

我昨天偶然发现了这个问题，想和大家分享一下。假设你有一个div容器，它的类名为list，里面还有 10 个div，每个 div 的类名为item，

<div class="list">
  <div class="item"></div>
  <div class="item"></div>
  etc..
</div>

使用以下 CSS 样式：

.list .item:hover + * + * {
   // some styles
}

。

解释

我们已经知道这+意味着相邻元素，但添加的星号允许用户选择具有相同类的相邻元素。

星号（*）字符用于扩展悬停类之后可识别的元素类型item

这意味着，在上面指定的样式中，我们希望将样式应用于同一类（即.item）的第二个相邻元素。因此，如果有五个相邻的div 元素，并且我将鼠标悬停在第三个元素上，则提供的样式将影响第五个元素。

观看下面的 YouTube 视频，以更好地了解其工作原理：