CSS3 新增選擇器概覽

selector :first-child 這個是後代選擇器. 怪異, 注意避免而不是理解.

selector:first-child

 当前 selector 选中的元素集合中的第一个元素

selector:last-child

当前 selector 选中的元素集合中的最后一个元素.

但是有問題, :last--child 不生效

應該是:

1 當前selector 的父元素parent
2 parent所有子元素, [a,b,c]
3 子元素的集合的第一個元素, 如果是selector
4 設定樣式, 生效.

  **if(selecor.parent.childElementList.firstElement === selector){
     生效
  }**

所以使用這兩個偽類, 在其上添加一個父元素.就可以認為是第一種實現了.

nth-child() 同樣適用於上面的規則.

 注意這裡的n 有很大發展空間, 可以實現奇/偶, 選擇哪幾個, 從哪幾個開始選.

nth-last-child() 倒著選

:first-of-type
:last-of-type
:nth- of-type
:nth-last-of-type
:root
選擇文檔根元素.就是html
:empty
選擇元素中連個空格都沒有的元素
:not
否定選擇器

:only-child

在集合只有一個元素的時候才會生效.

::selection

只能設定兩個屬性：background,color.

selector :first-child 這個是後代選擇器. 怪異, 注意避免而避免而不是理解.

selector:first-child

 当前 selector 选中的元素集合中的第一个元素

selector:last-child

当前 selector 选中的元素集合中的最后一个元素.

但是有問題, :last-child 不生效.

應該是:

1 當前selector 的父元素元素, [a,b,c]
3 子元素的集合的第一個元素, 如果是selector
4 設定樣式, 生效.

  **if(selecor.parent.childElementList.firstElement === selector){
     生效
  }**

所以使用這兩個偽類, 在其上添加一個父元素.就可以認為是第一種實現了.

nth-child() 同樣適用於上面的規則.

 注意這裡的n 有很大發展空間, 可以實現奇/偶, 選擇哪幾個, 從哪幾個開始選擇.

nth-last-child() 倒著選

:first-of-type

:last-of-type
:nth-of-type
:nth-last-of-type
:root
選擇文檔根元素.就是html
:empty
選擇元素中連個空格都沒有的元素
:not
否定選擇器

:only-child

在集合只有一個元素的時候才會生效.

::selection

只能設定兩個屬性：background,color.

更多CSS3 新增選擇器概覽 相關文章請關注PHP中文網！