屬性選擇器 偽類選擇器 層級選擇器

2021-10-04 02:57:14 字數 1587 閱讀 8430

漸進增強:(作用範圍:從小到大)

先保證最基本的功能 > 使用者體驗提公升

優雅降級:(作用範圍:從大到小)

先針對版本較高的裝置進行專案構建,保證使用者體驗的完美

犧牲一些效果,保證最基本的功能

選擇器(選擇符):

id class 型別(div span) 後代選擇器 偽類選擇器 偽元素選擇…

屬性選擇器:

e[attr]{} 選中e元素,且e元素有attr屬性,

e[attr="value"] 選中e元素,且e元素有attr屬性,值為value

e[attr~="value"] 選中e元素,且e元素有attr屬性,包含值value

e[attr^="value"] 選中e元素,且e元素有attr屬性,以value值開頭

e[attr$="value"] 選中e元素,且e元素有attr屬性,以value值結尾

e[attr*="value"] 選中e元素,且e元素有attr屬性,包含value值(可以擷取只要是連線起來是完整的value)

e[attr=|"value"] 選中e元素,且e元素有attr屬性,僅有value值,或者以value-開頭

偽類選擇器:

結構性偽類選擇器:

:first-child {} 選中第乙個元素

:last-child {} 選中最後乙個元素

:nth-child(n) {} n是從零開始的;該選擇器選取父元素的第n個子元素,不論元素的型別

2n 偶數列 even

2n-1 奇數列 odd

:only-child{} 選中只有乙個子元素的標籤 (沒有其他同級元素,但只有乙個a標籤)

:nth-last-child(n)倒數第n個元素

:first-of-type{} 指定型別的第乙個元素

:last-of-type{} 指定型別的最後乙個元素

:nth-of-type(n){} 指定型別的指定位置的元素

:nth-last-of-type(n){} 指定型別的指定位置的元素,倒著數

:only-of-type{}指定型別中只有乙個同一型別的元素(例:有很多同級元素,只有乙個a標籤)

拓展::root{}選中html (根元素)

:empty{} 匹配沒有任何子元素的元素x

:enabled{} 選中可以輸入的元素

:disabled{} 選中不可以輸入的元素

:checked{} 選中 被選中的元素 例:input:checked

::selection{} 被使用者選中的內容處於高亮的狀態

動態型別選擇器:

鏈結偽類選擇器

:link{} 初始狀態

:visited{} 訪問過後狀態

使用者行為選擇器

:hover{} 滑鼠移入狀態

:active{} 滑鼠按下時狀態

:focus{} 選中了獲取焦點(獲取游標)的元素

層級選擇器:

p > a 選中p標籤下的子標籤a

p + a 選中p標籤後的第乙個兄弟a標籤(只能選中乙個)

p ~ a 選中p標籤後的所有a標籤(可以選中多個兄弟元素)

屬性選擇器,偽類選擇器,偽元素選擇器

屬性選擇器 1doctype html 2 html lang en 3 head 4 meta charset utf 8 5 title 屬性選擇器 title 6 style 7 屬性匹配 8 label for 12 屬性名匹配 13 label for pwd 17 以什麼結尾匹配 18 ...

css選擇器 偽類選擇器 屬性選擇器

偽類選擇器 nth of type index index 同型別兄弟元素中的排名 屬性選擇器 attr val attr 屬件名稱 val 屬性值 屬性選擇器 href val 表標屬性的結尾 屬性選擇器 class tap 表示屬的開頭 first child選擇第乙個 元素 nth of ty...

03 高階選擇器,屬性選擇器,偽類選擇器

使用空格表示後代選擇器。顧名思義,父元素的後代 包括兒子,孫子,重孫子 container p container item p view code 使用 表示子代選擇器。比如div p,僅僅表示的是當前div元素選中的子代 不包含孫子.元素p。container pview code 多個選擇器之...