有一個列表，基本結構如下

<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;
}

效果完美

收工