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

2019独角兽企业重金招聘Python工程师标准>>>

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

转载于:https://my.oschina.net/u/3607067/blog/1628013