有時(shí)候我們需要用CSS選擇非第一個(gè)子元素，例如下面這樣的HTML，希望讓兩個(gè)span之間間隔一定的距離，但又不希望簡(jiǎn)單的給每個(gè)span設(shè)置margin-right（會(huì)導(dǎo)致最后一個(gè)span也有margin-right，可能影響之后元素的排版）。

<div>

<span></span>

<span></span>

<span></span>

<span></span>

</div>

這時(shí)如果能排除第一個(gè)元素，并給其他元素設(shè)置margin-left屬性，就能實(shí)現(xiàn)比較好的效果了。

可以利用not和first-child，通過(guò)下面的CSS實(shí)現(xiàn)。

div > span :not(:first-child) {

margin-left:10px

}

還可以利用兄弟元素選擇器+，像這樣：

div > span + span {

margin-left:10px

}

如果HTML是這樣的，應(yīng)該怎么做呢？

<div>

<span></span>

<p></p>

<span></span>

<span></span>

</div>

其實(shí)也很簡(jiǎn)單，用通配符就可以了：

div > * :not(:first-child) {

margin-left:10px

}

本文由jzj1993原創(chuàng)，轉(zhuǎn)載請(qǐng)注明來(lái)源：http://www.hainter.com/css3-not-first-child

總結(jié)

以上是生活随笔為你收集整理的CSS3选择非第一个子元素的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。