When CSS implements an element hover, the style of all sibling nodes changes

There are two types of sibling node selectors provided by CSS

• The first type: + The adjacent brother selector ( li + li ) can only select a brother behind him that is closely connected to himself, Lanshou. .
• The second type: ~ Universal brother selector ( li ~ li ) can only select all li younger brothers behind you, okay, you are the big brother, you are awesome

Therefore, I need a powerful CSS that can provide a selector that can select all siblings except myself, which is also used in this format - li {a certain symbol} li { color: red }

But the ideal is very full, and the reality is very backbone. You are not angry.

So, the mechanism I adopted a relatively disgusting approach.

First pass the parent of the li, such as the entire hover of ul, change the style of all li to { color:red }, and then add a special style to yourself when passing a certain li's own hover, such as li:hover { color : green }

If I play like this, I can realize that I only need to be the most special (green), and all the other brothers are like birds. Ha ha. .

Up! demo! !! !!

<ul>
  <li>我是第一</li>
  <li>我是第二</li>
  <li>我是第三</li>
</ul>

ul {
  &:hover {
    li {
      color: red;
    }
  }

  li {
    &:hover {
      color: green;
    }
  }
}

Here is the link to the demo https://codepen.io/lsner/pen/MQxBVW