CSS实现某元素hover时 全部兄弟节点样式改变

css 提供的兄弟节点选择器有两种

• 第一种：+  相邻兄弟选择器（ li + li ）只能选择与本身牢牢相连的身后的一个兄弟，蓝瘦。。
• 第二种：~  通用兄弟选择器（ li ~ li ）只能够选择在本身身后的全部li小弟 ，行，你是大哥你牛逼

因此，我须要强大的css可以提供一个能够选择除了本身以外的全部兄弟选择器， 使用起来也是是这样的格式 —— li {某个符号} li { color: red }

可是理想很丰满，现实很骨干啊，你说气不气。

因而，机制的我采用了一个相对恶心的办法。

先经过li的父级，好比 ul 整个hover时，把全部li的样式改成{ color:red } ，而后再经过某个li本身hover时，给本身加一个特别的样式，好比li:hover { color: green }

这么玩的话，就能够实现我须要只有本身最特别（是绿的)，其余兄弟全都是一个鸟样。哈哈。。

上！demo！！！

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

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

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

这里是demo的连接https://codepen.io/lsner/pen/MQxBVW