1. 程式人生 > >css選擇器位置和數量技巧

css選擇器位置和數量技巧

clas 以及 code blog color 和數 ble 子元素 child

1. 除去首個元素

li:not(:first-child)
li + li
li:first-child ~ li

2. 第1-3個元素

li:nth-child(-n+3)

3. 除去第1-3個元素

li:not(:nth-child(-n+3))

4.第5-10個子元素

table tr:nth-child(n+5):nth-child(-n+10) {
  background-color: red;
}

5.倒數第四個以及之前的元素

:nth-last-child(n+4)

6. .list裏面li元素個數大於等於4,則顯示為紅色(數量感知)

.list li:nth-last-child(n+4) ~ li,
.list li:nth-last-child(n+4):first-child 
{   color: red }

css選擇器位置和數量技巧