版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_33222871/article/details/83893427
有一个列表，基本结构如下
<ul>
<li>你好</li>
<li>你好</li>
<li>你好</li>
</ul>
样式基本如下
ul >li {
margin:10px;
}
现有一个高亮效果class
.active {
margin-top:3px;
margin-left:3px;
}
实验发现
当active加在第一个li上时，由于margin-top变小，导致所有li整体上移 7px，加在其他li上没有变化
解决思路
变化原因是li margin-top变小，因此应该给其余li加大margin-top
又因为只有加在第一个li上时才有变化，因此限定修改dom应该为第二个li
该li要求满足
- 它的上一个li为active
- 它是所有li中的第二个
由于直接选中第二个li难度很高，所有转变思路为选中active的下一个节点
同时该active应该是第一个li
-
下一个节点采用**+**选择器，该选择器仅选择下一个符合的节点
-
选中第一个li，使用first-child伪类选择器，first-of-type应该也可以，不过这个是css3里的
-
第一个li同时要是active，原本想使用**,选择器，但是没成功，所以换成[]**选择器
综上所属，该选择器应该是
li:first-child[class~=active] +li{
margin-top:17px;
}
效果完美