新增選擇器：
子串匹配的屬性選擇符
e[att^="val"]匹配具有att屬性、且值以val開頭的e元素
子串匹配的屬性選擇符
e[att$="val"]匹配具有att屬性、且值以val結尾的e元素
子串匹配的屬性選擇符
e[att*="val"]匹配具有att屬性、且值中含有val的e元素
結構性偽類
e:root匹配文件的根元素。在html中，根元素永遠是html
結構性偽類
e:nth-child(n)匹配父元素中的第n個子元素e
結構性偽類
e:nth-last-child(n)匹配父元素中的倒數第n個結構子元素e
結構性偽類
e:nth-of-type(n)匹配同型別中的第n個同級兄弟元素e
結構性偽類
e:nth-last-of-type(n)匹配同型別中的倒數第n個同級兄弟元素e
結構性偽類
e:last-child匹配父元素中最後乙個e元素
結構性偽類
e:first-of-type匹配同級兄弟元素中的第乙個e元素
結構性偽類
e:only-child匹配屬於父元素中唯一子元素的e
結構性偽類
e:only-of-type匹配屬於同型別中唯一兄弟元素的e
結構性偽類
e:empty匹配沒有任何子元素(包括text節點)的元素e
目標偽類
:target匹配相關url指向的e元素
ui元素狀態偽類
e:enabled匹配所有使用者介面(form表單)中處於可用狀態的e元素
ui元素狀態偽類
e:disabled匹配所有使用者介面(form表單)中處於不可用狀態的e元素
ui元素狀態偽類
e:checked匹配所有使用者介面(form表單)中處於選中狀態的元素e
ui元素狀態偽類
e::selection匹配e元素中被使用者選中或處於高亮狀態的部分
否定偽類
e:not(s)匹配所有不匹配簡單選擇符s的元素e
通用兄弟元素選擇器
e ~ f匹配e元素之後的f元素
常用選擇器：
.class
選擇 的所有元素。
#id#firstname
選擇 id="firstname" 的所有元素。
*選擇所有元素。
element
選擇所有
元素。element,element
div,p；選擇所有
元素和所有
元素。element element
div p；選擇
元素內部的所有
元素。element>element
div>p；選擇父元素為
元素的所有
元素element+element
div+p；選擇緊接在
元素之後的所有
元素。[attribute]
選擇帶有 target 屬性所有元素。
[attribute=value]
選擇 target="_blank" 的所有元素。
[attribute~=value]
選擇 title 屬性包含單詞 "flower" 的所有元素。
[attribute|=value]
選擇 lang 屬性值以 "en" 開頭的所有元素。
:link
選擇所有未被訪問的鏈結。
:visiteda
選擇所有已被訪問的鏈結。
:activea
選擇活動鏈結。
:hover
a:hover選擇滑鼠指標位於其上的鏈結。
:focus
input:focus選擇獲得焦點的 input 元素
:first-letter
p:first-letter選擇每個
元素的首字母。
:first-line
p:first-line選擇每個
元素的首行。
:first-child
p:first-child選擇屬於父元素的第乙個子元素的每個
元素。:before
p:before在每個
元素的內容之前插入內容。
:after
p:after在每個
元素的內容之後插入內容。
:lang(language)
p:lang(it)選擇帶有以 "it" 開頭的 lang 屬性值的每個
元素。element1~element2
p~ul選擇前面有
元素的每個
[attribute^=value]
a[src^="https"]選擇其 src 屬性值以 "https" 開頭的每個 元素。
[attribute$=value]
a[src$=".pdf"]選擇其 src 屬性以 ".pdf" 結尾的所有 元素
[attribute*=value]
a[src*="abc"]選擇其 src 屬性中包含 "abc" 子串的每個 元素。
:first-of-type
p:first-of-type選擇屬於其父元素的首個
元素的每個
元素。:last-of-type
p:last-of-type選擇屬於其父元素的最後
元素的每個
元素。:only-of-type
p:only-of-type選擇屬於其父元素唯一的
元素的每個
元素。:only-child
p:only-child選擇屬於其父元素的唯一子元素的每個
元素。:nth-child(n)
p:nth-child(2)選擇屬於其父元素的第二個子元素的每個
元素。:nth-last-child(n)
p:nth-last-child(2)同上，從最後乙個子元素開始計數。
:nth-of-type(n)
p:nth-of-type(2)選擇屬於其父元素第二個
元素的每個
元素。:nth-last-of-type(n)
p:nth-last-of-type(2)同上，但是從最後乙個子元素開始計數。
:last-child
p:last-child選擇屬於其父元素最後乙個子元素每個
元素。:root
:root選擇文件的根元素。
:empty
p:empty選擇沒有子元素的每個
元素(包括文字節點)。
:target
#news:target選擇當前活動的 #news 元素。
:enabled
input:enabled選擇每個啟用的 元素。
:disabled
input:disabled選擇每個禁用的 元素
:checked
input:checked選擇每個被選中的 元素。
:not(selector)
:not(p)選擇非
元素的每個元素。
::selection
::selection選擇被使用者選取的元素部分。
3秒加星標，不再錯過任何一篇文章！
如果你喜歡本文，文末在看，想要獲得更多前端資源，戳個「在看」
不固執↘↘↘
css3 選擇器 CSS3選擇器
子級選擇器用於選取帶有特定父元素的元素。書寫語法 element1 element2 注意 如果 element2 元素不是父元素 element1 的直接子元素，則不會被選擇。符號之前書寫父級的選擇器，符號之後寫子級選擇器，必須滿足父子級關係才選中標籤 相鄰兄弟選擇器可以用於選擇緊接在另乙個元素後...
css3 選擇器 CSS3選擇器詳解
css3在css2基礎上，增強或新增了許多特性，彌補了css2的眾多不足之處，使得web開發變得更為高效和便捷。比如說，同樣是乙個頭像，可能在低版本的瀏覽器中，頭像方的 在高版本的瀏覽器中，頭像是圓的。漸進增強和優雅降級之間的不同 面試題目 由於css3普遍存在相容性問題，為了避免因相容性帶來的干擾...
CSS3選擇器 屬性選擇器
指定屬性名，但沒有確定任何屬性值 type text css div div title style div1div title name div2div title age div3div body 指定屬性名，並指定了該屬性的屬性值 其他 與上述相同 div title name 指定屬性名，具...