精通:nth-child

:nth-child 基本用法

:nth-child
:nth-child(8) 選中第8個子元素

  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  

li:nth-child(8) span {
    background-color: #298EB2;
    box-shadow: -3px -3px 10px rgba(0, 0, 0, 0.4), inset 0 0 10px black;
}

使用 :nth-child(8) 可以讓你選中父元素下唯一的第8個子元素

:nth-child 範圍用法

正方向範圍 
:nth-child(n+6) 選中從第6個開始的子元素

  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  

li:nth-child(n+6) span {
    background-color: #298EB2;
    box-shadow: inset -3px -3px 10px rgba(0, 0, 0, 0.4), 0 0 10px black;
}

使用 :nth-child(n+6) ,就相當於讓你選中第6個 :nth-child(6) 和其後的所有子元素

負方向範圍
:nth-child(-n+9) 選中從第1個到第9個子元素

  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  

li:nth-child(-n+9) span {
    background-color: #298EB2;
    box-shadow: inset -3px -3px 10px rgba(0, 0, 0, 0.4), 0 0 10px black;
}

使用 :nth-child(-n+9),就相當讓你選中第9個和其之前的所有子元素

前後限制範圍
nth-child(n+4):nth-child(-n+8) 選中第4-8個子元素

  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  

li:nth-child(n+4):nth-child(-n+8) span {
    background-color: #298EB2;
    box-shadow: inset -3px -3px 10px rgba(0, 0, 0, 0.4), 0 0 10px black;
}

使用 nth-child(n+4):nth-child(-n+8) 我們可以選中某一範圍內子元素,上面的例子裏是從第4個到第8個子元素

範圍高級用法
nth-child(n+2):nth-child(odd):nth-child(-n+9) 奇數位/偶數位子元素

  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  

li:nth-child(n+2):nth-child(odd):nth-child(-n+9) span {
    background-color: #298EB2;
    box-shadow: inset -3px -3px 10px rgba(0, 0, 0, 0.4), 0 0 10px black;
}

使用 nth-child(n+2):nth-child(odd):nth-child(-n+9) 我們將會選中的子元素是從第2位到第9位,並且只包含奇數位。

nth-child(3n+1):nth-child(even) 間隔選擇子元素

  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  

li:nth-child(n+2):nth-child(odd):nth-child(-n+9) span {
    background-color: #298EB2;
    box-shadow: inset -3px -3px 10px rgba(0, 0, 0, 0.4), 0 0 10px black;
}

使用 :nth-child(3n+1) 我們可以每隔3個選中一個,也就是第 1, 4, 7 和 10 個子元素,但通過使用 :nth-child(even) 我們過濾掉了奇數位子元素,也就是 1 和 7,於是,剩下的子元素只有 4 和 10。

:nth-of-type 的用法

:nth-of-type
:nth-of-type(3) 指定要求相同的子元素類型

 
  
  
  
  

/* 用藍色圓斑表示 */
span:nth-of-type(3) {
    background-color: #298EB2;
    box-shadow: inset -3px -3px 10px rgba(0, 0, 0, 0.4), 0 0 10px black;
}

/* 用桔色方塊表示 */
div:nth-of-type(4) {
    background-color: #E17149:
    box-shadow: inset -3px -3px 10px rgba(0, 0, 0, 0.4), 0 0 10px black; 
}

使用 :nth-of-type(),我們可以指定相同的子元素類型,然後再選擇。

:nth-of-type 範圍用法

正方向相同子元素類型範圍
span:nth-of-type(n+3)
div:nth-of-type(2n+2)

 
  
  
  
  

/* 用藍色圓斑表示 */
span:nth-of-type(n+3) {
    background-color: #298EB2;
    box-shadow: inset -3px -3px 10px rgba(0, 0, 0, 0.4), 0 0 10px black;
}

/* 用橘色方塊表示 */
div:nth-of-type(2n+2) {
    background-color: #E17149:
    box-shadow: inset -3px -3px 10px rgba(0, 0, 0, 0.4), 0 0 10px black; 
}

使用 span:nth-of-type(n+3) 或 div:nth-of-type(2n+2),首先指定是相同的子元素類型,然後在這些類型裏選擇...

負方向相同子元素類型範圍
span:nth-of-type(-n+4)
div:nth-of-type(-n+5)

 
  
  
  
  

/* 用藍色圓斑表示 */
span:nth-of-type(-n+4) {
    background-color: #298EB2;
    box-shadow: inset -3px -3px 10px rgba(0, 0, 0, 0.4), 0 0 10px black;
}

/* 用橘色方塊表示 */
div:nth-of-type(-n+5) {
    background-color: #E17149:
    box-shadow: inset -3px -3px 10px rgba(0, 0, 0, 0.4), 0 0 10px black; 
}

使用 span:nth-of-type(-n+4) or div:nth-of-type(-n+5),首先指定是相同的子元素類型,然後在這些類型裏選擇...

前後範圍限制相同子元素類型
span:nth-of-type(n+3):nth-of-type(-n+6)
div:nth-of-type(n+1):nth-of-type(-n+3)

 
  
  
  
  

/* 用藍色圓斑表示 */
span:nth-of-type(n+3):nth-of-type(-n+6) {
    background-color: #298EB2;
    box-shadow: inset -3px -3px 10px rgba(0, 0, 0, 0.4), 0 0 10px black;
}

/* 用橘色方塊表示 */
div:nth-of-type(n+1):n-th-of-type(-n+3) {
    background-color: #E17149:
    box-shadow: inset -3px -3px 10px rgba(0, 0, 0, 0.4), 0 0 10px black;
}

使用 :nth-of-type(n+3):nth-of-type(-n+6) 和 div:nth-of-type(n+1):nth-of-type(-n+3),首先指定是相同的子元素類型,然後在這些類型裏選擇...這個例子中選中的將會是第 1-3 和 3-6 個子元素。

高級相同子類型加前後範圍限制用法
span:nth-of-type(n+3):nth-of-type(odd):nth-of-type(-n+6)
div:nth-of-type(n+1):nth-of-type(even):nth-of-type(-n+3)

 
  
  
  
  

/* 用藍色圓斑表示 */
span:nth-of-type(n+3):nth-of-type(odd):nth-of-type(-n+7) {
    background-color: #298EB2;
    box-shadow: inset -3px -3px 10px rgba(0, 0, 0, 0.4), 0 0 10px black;
}

/* 用橘色方塊表示 */
div:nth-of-type(n+1):nth-ofo-type(even):nth-of-type(-n+3)  {
    background-color: #E17149:
    box-shadow: inset -3px -3px 10px rgba(0, 0, 0, 0.4), 0 0 10px black; 
}

使用 span:nth-of-type(n+3):nth-of-type(odd):nth-of-type(-n+6) 和 div:nth-of-type(n+1):nth-of-type(even):nth-of-type(-n+3),你既能夠限制是在相同類型子元素裏選擇,同時指定選擇的起始位置和結束位置。這裏同時使用了奇偶位限制。所有,最後剩下的是方 3 & 5 和 圓 2。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章