CSS3選擇非第一個子元素
阿新 • • 發佈:2018-12-25
有時候我們需要用CSS選擇非第一個子元素,例如下面這樣的HTML,希望讓兩個span
之間間隔一定的距離,但又不希望簡單的給每個span
設定margin-right
(會導致最後一個span也有margin-right
,可能影響之後元素的排版)。
<div>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
這時如果能排除第一個元素,並給其他元素設定margin-left
屬性,就能實現比較好的效果了。
可以利用not
和first-child
div > span :not(:first-child){
margin-left:10px
}
還可以利用兄弟元素選擇器+
,像這樣:
div > span + span {
margin-left:10px
}
如果HTML是這樣的,應該怎麼做呢?
<div>
<span></span>
<p></p>
<span></span>
<span></span>
</div>
其實也很簡單,用萬用字元就可以了:
div >*:not(:first
margin-left:10px
}