首頁 > web前端 > css教學 > 主體

CSS3 新增選擇器概覽

高洛峰
發布: 2017-02-15 13:09:07
原創
1492 人瀏覽過

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中文網!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板