用 CSS (E+F)相邻选择器 設置多段兄弟元素第一個的樣式

場景是實現

多段的兄弟元素的第一個添加間距 如:

<c></c>

<a class='test'></a>

<a class='test'></a>

<a class='test'></a>

<a class='test'></a>

<b></b>

<b></b>

<a class='test'></a>

<a class='test'></a>

<a class='test'></a>

<a class='test'></a>

.test {

margin-top:30px;

}

.test + .test {

margin-top:0;

}

如

<c></c>

<a class='test'></a>

<x></x>

<a class='test'></a>

<x></x>

<a class='test'></a>

<a class='test'></a>

<b></b>

<b></b>

<a class='test'></a>

<x></x>

<a class='test'></a>

<x></x>

<a class='test'></a>

<a class='test'></a>

如相鄰兄弟元素中間還有其他元素則

.test {

margin-top:0;

}

c + .test, b + .test{

margin-top:30px;

}

不存在多段只設置第一個的話可以通過~選擇符

.test {

margin-top:30px;

}

.test ~ .test {

margin-top:0;

}