首頁 > web前端 > html教學 > CSS3選擇器的研究

CSS3選擇器的研究

WBOY
發布: 2016-09-15 11:15:14
原創
991 人瀏覽過

屬性選擇器


  [title]:選擇帶有title屬性的元素


  [title='hello']:選擇屬性是title且值是hello的元素


  [title~='hello']:選擇屬性是title且部分值是hello的元素,hello需要是單獨的值,以空格分開


  [title*='hello']:選擇屬性是title並且其中包含了hello的元素


  [title|='hello']:選擇屬性是title並且值是以hello開頭並且允許hello後面以-的任意字元


  [title^='hello']:屬性以hello開頭的任意字元


  [title$='hello']:屬性以hello結束的任意字元


  [title^='hello'][title$='.py']:選擇屬性以hello開頭並且以.py結束的元素

 

連結符


  h1~p:選擇h1元素後面的所有同級p元素


  p~p:選擇p元素後面的所有同級p元素,除了第一個p元素


  h1+p:選擇h1元素後面的第一個同級p元素

 

偽類選擇器


  nth系列,數字

 

  nth-child():依位置來算數


  nth-of-type():依型別來算數


  nth-last-child():從末尾按照位置開始算


  nth-last-of-type():從末尾按照型別來算數


  透過(-n+number)來指定選擇前幾個元素


  -n會向負數方向增加先從0開始,-1,-2,-3...

  使用:nth-child(odd)或:nth-child(even)實現隔行變色。

 

單一選擇


  first-child:選擇第一個元素,按位置
  first-of-type:選擇第一個元素,按類型

 

  last-child:選擇最後一個元素,按位置
  last-of-type:選擇最後一個元素,按類型

 

  only-child:沒有其他兄弟元素的時候會被選中
  only-of-type:可以有兄弟元素但要類型不同


  使用only-of-type可以讓你從其他類型元素中挑選出一個元素來,反之only-child需要元素單獨存在才行。這個肯定有大作用,待發現。

 

偽類

 

:target

  1.   透過:target來模擬點擊事件
  2.   
  3.   利用target實作tab欄切換
  4.   使用target偽類,可以輕鬆地突出顯示使用者要閱讀的評論

利用target製作的tab切換,當然它還是有很多缺陷的,不過大家可以透過它擴展擴展。

:empty
  選擇沒有子元素且沒有文字節點的元素

:root
  選擇根元素,在HTML中root永遠是html元素

:not
  參數支援傳遞一個元素甚至其他偽類選擇器,但不支援傳遞連結符以及偽元素
  選擇除了指定參數以外的任意元素


元素狀態偽類

:checked
  當checkbox被選中時

:disabled
  當元素被禁用時

:enabled
  當元素沒有被禁用時

 

偽元素

::first-line
  選擇第一行文字

::first-letter
  選第一個字

::after
  在元素末尾加上一個偽元素

::before
  在元素開頭加上一個偽元素

::selection
  應用到選取的文字上

 

合理利用這些選擇器,可以幫你解決許多問題,目前還在研究中,這篇內容長期更新。

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