CSS選擇器速查

2021-07-22 23:11:17 字數 2371 閱讀 7397

模式

含義css3

選擇器型別

*任何元素

萬用字元選擇器

e型別為 e 的元素

型別選擇器

e.warning

類為 「warning」 的 e 元素

類選擇器

e#myid

id 等於 「myid」 的 e 元素

id 選擇器

e[foo]

帶 「foo」 屬性的 e 元素

屬性選擇器

e[foo=」bar」]

「foo」 屬性值恰為 「bar」 的 e 元素(引號是可選的)

屬性選擇器

e[foo~=」bar」]

「foo」 屬性為一組空格分隔的值,且其中之一恰為 「bar」 的e元素(引號是可選的)

屬性選擇器

e[foo^=」bar」]

「foo」 屬性以 「bar」 開頭的 e 元素(引號是可選的)

是屬性選擇器

e[foo$=」bar」]

「foo」 屬性以 「bar」 結束的 e 元素(引號是可選的)

是屬性選擇器

e[foo*=」bar」]

「foo」 屬性值在某處包含 「bar」 的 e 元素(引號是可選的)

是屬性選擇器

e[foo|=」en」]

「foo」 屬性為一組連字元分隔的值且(從左邊開始)以 「en」 開頭的 e 元素(引號是可選的)

屬性選擇器

e f作為 e 元素後代的 f 元素

後代結合符

e > f

作為 e 元素子元素的 f 元素

子元素結合符

e + f

緊接 e 元素後面的 f 元素

相鄰同胞元素結合符

e ~ f

位於 e 元素後面的 f 元素

是通用同胞元素結合符

e:root

e 元素,文件根元素

是結構偽類

e:nth-child(n)

e 元素,其父元素的第 n 個子元素

是結構偽類

e:nth-last-child(n)

e 元素,其父元素的倒數第 n 個子元素

是結構偽類

e:nth-of-type(n)

e 元素,該型別的第 n 個同胞元素

是結構偽類

e:nth-last-of-type(n)

e 元素,該型別的倒數第 n 個同胞元素

是結構偽類

e:first-child

e 元素,其父元素的第乙個子元素

結構偽類

e:last-child

e 元素,其父元素的最後乙個子元素

是結構偽類

e:first-of-type

e 元素,該型別的第乙個同胞元素

是結構偽類

e:last-of-type

e 元素,該型別的最後乙個同胞元素

是結構偽類

e:only-child

e 元素,其父元素的唯一子元素

是結構偽類

e:only-of-type

e 元素,該型別的唯一同胞元素

是結構偽類

e:empty

沒有子元素(含文字結點)的 e 元素

是結構偽類

e:link,e:visited

作為目標尚未訪問過(:link)或已經訪問過(:visited)的超連結的e元素

鏈結偽類

e:focus,e:hover,e:active

處於特定使用者操作下的 e 元素

使用者操作偽類

e:target

作為引用 uri 目標的 e 元素

是目標偽類

e:lang(fr)

語言為 「fr」 的 e 元素

:lang()偽類

e:enabled e:disabled

狀態為有效的或無效的使用者介面 e 元素

是ui 元素狀態偽類

e:checked

選中了的使用者介面 e 元素(如單選按鈕或 核取方塊)

是ui 元素狀態偽類

e::first-line

e 元素在格式上的第一行

::first-line 偽元素

e::first-letter

e 元素在格式上的第乙個字母

::first-letter 偽元素

e::before

e 元素之前的生成內容

::before 偽元素

e::after

e 元素之後的生成內容

::after 偽元素

e:not(s)

與簡單選擇器 s(例如 input:not(.warning)) 不匹配的 e 元素

是否定偽類

css選擇器語法速查

通用選擇器 類似於萬用字元,匹配文件中所有元素型別 型別選擇器 h1,h2,p 匹配以逗號隔開元素列表中的所有元素 類選擇器 glass or p.glass id選擇器 id or p id 子選擇器 td b 匹配元素是另外乙個元素的直接子元素 後繼選擇器 td b 匹配另乙個指定元素的所有巢狀...

css選擇器 CSS選擇器總結

在前不久的專案中,實習小妹妹在乙個全域性的樣式中使用了下面這個css選擇器 content 對應的html結構大致是 實習妹子大致的意思是想要讓content下的子元素div的高度100 但是貌似她沒有真正理解first child的意義,從而導致這個全域性的樣式讓 所有頁面都出現了問題,然後我就只...

JQuery選擇器速查列表

id id選擇器 div 元素選擇器 classname 類選擇器 classname,classname1,id1 組合選擇器 id id選擇器 div 元素選擇器 classname 類選擇器 classname,classname1,id1 組合選擇器 id classname 子元素選擇器 ...