解决高亮导致的列表元素整体上移

有一个列表，基本结构如下

<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要求满足

1. 它的上一个li为active
2. 它是所有li中的第二个

由于直接选中第二个li难度很高，所有转变思路为选中active的下一个节点
同时该active应该是第一个li

1. 下一个节点采用**+**选择器，该选择器仅选择下一个符合的节点

2. 选中第一个li，使用first-child伪类选择器，first-of-type应该也可以，不过这个是css3里的

3. 第一个li同时要是active，原本想使用**,选择器，但是没成功，所以换成[]**选择器

综上所属，该选择器应该是

li:first-child[class~=active] +li{
	margin-top:17px;
}

效果完美

收工