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