1. 程式人生 > >CSS: nth-child()選擇前幾個元素

CSS: nth-child()選擇前幾個元素

前言

渲染列表時,需要設定前3個元素的margin-top值與其他的不同。

使用

:nth-child(-n+3){
     margin-top: 12px;
 }

擴充套件

  1. 選擇前幾個元素

    /*【負方向範圍】選擇第1個到第6個 */
    :nth-child(-n+6){}
  2. 從第幾個開始選擇
    /*【正方向範圍】選擇從第6個開始的 */
    :nth-child(n+6){}
  3. 兩者結合使用,可以限制選擇某一個範圍

    /*【限制範圍】選擇第6個到第9個,取兩者的交集【感謝小夥伴的糾正~】 */
    :nth-child(-n+9):nth-child(n+6){}

參考 

總結

看別人的部落格可以解決問題,但是自己再簡單地記錄下來會更深刻。慢慢積累,各個擊破。

如果你有什麼疑問或想法,歡迎留言評論,或者掃描下方二維碼,與我取得聯絡~ (記得備註:CSDN喔~)