悬停第n个元素时如何将CSS应用于前n个元素

Question

这是我从亚马逊询问的面试问题。 问题是使用HTML和CSS仅将鼠标悬停在第n个元素上时将某些CSS应用于前n个元素。 即 您的页面上有5个灰色的星星，当您将第4个星星悬停时，前4个星星会变为黄色，就像Amazon上的评分UI。

Answer 1

您可以将Flexbox与flex-direction: row-reverse和general sibling combinator ~一起使用。兄弟姐妹选择器将影响悬停项目之后的所有兄弟姐妹，而反向的flexbox将在悬停项目之前显示它们。

.container {
  display: inline-flex;
  flex-direction: row-reverse;
  list-style: none;
}

.container li:hover, .container li:hover ~ li {
  color: red;
}

<ul class="container">
  <li>X</li>
  <li>X</li>
  <li>X</li>
  <li>X</li>
  <li>X</li>
</ul>