屬性選擇器
[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
- 通過:target來模擬點擊事件
- <a href="#a" id="a"></a>
- 利用target實現tab欄切換
- 使用target偽類,可以輕松地突出顯示用戶要閱讀的評論
利用target制作的tab切換,當然它還是有很多缺陷的,不過大家可以通過它擴展擴展。
:empty
選擇沒有子元素并且沒有文本節點的元素
:root
選擇根元素,在HTML中root永遠是html元素
:not
參數支持傳遞一個元素甚至其他偽類選擇器,但不支持傳遞連結符以及偽元素
選擇除了指定參數以外的任意元素
:optional
選擇不是必須填寫的input元素
也就是獲取到input沒有加required屬性的元素
:required
選擇有加required屬性的元素
:read-write
獲取可讀寫的input元素
:read-only
獲取只可讀的input元素
:out-of-range
當input元素的值是超出范圍時,max和min限定的范圍
:valid
選擇所有合法的輸入,適用于表單元素有限制,如最小輸入元素和屬性的最大值,電子郵件具有合法的電子郵件,或者數值等數字字段。
元素狀態偽類
:checked
當checkbox被選中時
:disabled
當元素被禁用時
:enabled
當元素沒有被禁用時
偽元素
::first-line
選擇第一行文字
::first-letter
選擇第一個字
::after
在元素末尾添加一個偽元素
::before
在元素開頭添加一個偽元素
::selection
應用到選中的文本上
合理利用這些選擇器,可以幫你解決很多問題,目前還在研究中,本篇內容長期更新。
文章列表
不含病毒。www.avast.com |
留言列表