1. 程式人生 > >CSS3選擇非第一個子元素

CSS3選擇非第一個子元素

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

  1. <div>
  2. <span></span>
  3. <span></span>
  4. <span></span>
  5. <span></span>
  6. </div>

這時如果能排除第一個元素,並給其他元素設定margin-left屬性,就能實現比較好的效果了。

可以利用notfirst-child

,通過下面的CSS實現。

  1. div > span :not(:first-child){
  2. margin-left:10px
  3. }

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

  1. div > span + span {
  2. margin-left:10px
  3. }

如果HTML是這樣的,應該怎麼做呢?

  1. <div>
  2. <span></span>
  3. <p></p>
  4. <span></span>
  5. <span></span>
  6. </div>

其實也很簡單,用萬用字元就可以了:

  1. div >*:not(:first
    -child){
  2. margin-left:10px
  3. }