文章目錄

• 一、常用的scc選擇器？
• 二、偽元素以及偽類？

---

# 前言 本文章立志于收集各種各樣的css類選擇器，先根據官方的參考手冊，列舉出其中的選擇器，在以=以后接觸到新的性質，或者是跟新出新的選擇器，本文章也會做出相應的跟新。

---

一、常用的scc選擇器？

最為基礎的選擇器：id選擇器，類名選擇器，標簽選擇器，*選擇器。
選擇器的權重排序：
id>class(屬性選擇器)>element(偽元素選擇器)>星號(選擇所有)
css選擇器列舉：
注意后代元素，子元素，父元素，父輩元素的區別

css選擇器效果

.class1.class2	選中同時擁有class1和class2的元素
.class1 .class2	選中class1樣式后代元素的所有class2樣式
element.class	選中class樣式后代元素的所有element標簽
element,element	同時選中兩個標簽元素
element1 element2	選中標簽1后代元素下的所有標簽2
element1>element2	選中所有父元素是element1的element2
element1+element2	選中element1元素下的第一個標簽未element2的子元素
element1~element2	選中所有element1元素下所有的標簽為element2的子元素
[attribute]	選中帶有attribute屬性的[attribute]元素
[attribute=value]	選中帶有attribute屬性且屬性值為value的所有元素
[attribute~=value]	選中帶有attribute屬性且屬性值包含"value" 的所有元素
[attribute|=value]	選中帶有attribute屬性且屬性值以"value" 開頭的所有元素
[attribute^=value]	選中帶有attribute屬性且屬性值以"value"開頭的所有元素
[attribute$=value]	選中帶有attribute屬性且屬性值以"value"結尾的所有元素
[attribute*=value]	選中帶有attribute屬性且屬性值包含"value"子串的所有元素
[attribute*=value]	選中帶有attribute屬性且屬性值包含"value"子串的所有元素
:active	選中活動元素
:link	選中未訪過的元素
::after	在元素之后插入內容
::before	在元素之前插入內容
:checked	選中默認元素
:disabled	選中禁用狀態的元素
:enabled	選中啟用的元素
:empty	選中沒有子元素的元素
:first-child	選中自己是父元素第一個子元素的元素
::first-letter	選中元素的首字母(p元素)
::first-line	選中元素的首行
:first-of-type	選中自己是父元素首個該類型子元素的元素
:focus	選中獲得焦點的元素
:fullscreen	選中處于全屏模式的元素
:hover	選中指針位于其上的元素
:in-range	選中值在一定范圍內的input元素
:indeterminate	選中處于不確定狀態下的元素
:invalid	選中具有無效值的input元素
:lang(language)	選中lang屬性為language的元素，languange是語言，有專門的代號指代
:last-child	選中父元素最后一個子元素(選擇器前的標簽規范的是被選中的元素，而不是其他元素)
:last-of-type	選中父元素最后一個指定類型的元素
:not(selector)	不是該選擇器選中的所有元素（非 邏輯）
:nth-child(n)	選中父元素的第n個子元素
:nth-last-child(n)	選擇父元素的最后第n個子元素(逆向計數)
:nth-of-type(n)	根據上方理解
:nth-last-of-type(n)	根據上方理解
:only-of-type	選中其父元素的唯一類該元素的所有該元素
:only-child	選中其父元素的唯一一個該元素
:optional	選中不帶‘required元素的input元素’
:out-of-range	選中超出指定范圍的元素
::placeholder	選中給出placeholder屬性的input元素
:read-only	選中具有只讀屬性的元素
:read-write	選中不具有只讀屬性的元素
:required	選中具有required屬性的元素
:root	選中文檔的根元素
::selection	選中用戶已選用的元素
:target	選中當前活動的元素
:valid	選中帶有有效值的input元素
:visited	選中已訪問的元素

二、偽元素以及偽類？

css中添加偽元素以及偽類是為了格式化文檔以外的內容，這些元素不在文檔數中。
偽類：元素在不同狀態下的為其設定不同的樣式。 修飾那些存在在DOM樹中的元素，但是其所處于的狀態不存在于DOM樹中。
偽元素：在存在在DOM樹中的元素前后添加一些元素，為其添加樣式。雖然這些元素在頁面上可以看到，但是其并不存在于DOM樹中。

注意：
:link,:visited,:hover,:active等這些偽元素在IE6中只支持在a標簽后使用
：active：點擊鏈接時，鏈接成為活動的.
:link未被訪問頁面的鏈接.
:visited：已訪問頁面的鏈接.
:hover ：鼠標指針浮動到鏈接.
:default：只能作用于表單上，選中默認狀態的表單元素
:has :滿足一定條件后，匹配該元素前位元素,例如:content:has(> img),匹配到的是content
first-of-type和first-child的區別：
前者是首個該類型的子元素，后者是第一個子元素且滿足于前面的標簽。

總結

以上是生活随笔為你收集整理的css类选择器大全的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。