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

<div>

<span></span>

<span></span>

<span></span>

<span></span>

</div>

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

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

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-child) {

margin-left:10px

}

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。