1.基礎選擇器

選擇器例子例子描述

.class	.intro	選取所有 class="intro" 的元素。
#id	#firstname	選取 id="firstname" 的那個元素。
*	*	選取所有元素。
element	p	選取所有 <p> 元素。
element,element,..	div, p	選取所有 <div> 元素和所有 <p> 元素。

?

2.層次選擇器

選擇器示例示例描述

element?element	div p	選擇 <div> 元素內的所有 <p> 元素。
element>element	div > p	選擇其父元素是 <div> 元素的所有 <p> 元素。
element+element	div + p	選擇所有緊隨 <div> 元素之后的 <p> 元素。
element1~element2	p ~ ul	選擇前面有 <p> 元素的每個 <ul> 元素。

?

3.結構偽類選擇器

選擇器例子例子描述

:active	a:active	選擇活動的鏈接。
:checked	input:checked	選擇每個被選中的 <input> 元素。
:disabled	input:disabled	選擇每個被禁用的 <input> 元素。
:empty	p:empty	選擇沒有子元素的每個 <p> 元素。
:enabled	input:enabled	選擇每個已啟用的 <input> 元素。
:first-child	p:first-child	選擇作為其父的首個子元素的每個 <p> 元素。
:first-of-type	p:first-of-type	選擇作為其父的首個 <p> 元素的每個 <p> 元素。
:focus	input:focus	選擇獲得焦點的 <input> 元素。
:hover	a:hover	選擇鼠標懸停其上的鏈接。
:in-range	input:in-range	選擇具有指定范圍內的值的 <input> 元素。
:invalid	input:invalid	選擇所有具有無效值的 <input> 元素。
:lang(language)	p:lang(it)	選擇每個 lang 屬性值以 "it" 開頭的 <p> 元素。
:last-child	p:last-child	選擇作為其父的最后一個子元素的每個 <p> 元素。
:last-of-type	p:last-of-type	選擇作為其父的最后一個 <p> 元素的每個 <p> 元素。
:link	a:link	選擇所有未被訪問的鏈接。
:not(selector)	:not(p)	選擇每個非 <p> 元素的元素。
:nth-child(n)	p:nth-child(2)	選擇作為其父的第二個子元素的每個 <p> 元素。
:nth-last-child(n)	p:nth-last-child(2)	選擇作為父的第二個子元素的每個<p>元素，從最后一個子元素計數。
:nth-last-of-type(n)	p:nth-last-of-type(2)	選擇作為父的第二個<p>元素的每個<p>元素，從最后一個子元素計數
:nth-of-type(n)	p:nth-of-type(2)	選擇作為其父的第二個 <p> 元素的每個 <p> 元素。
:only-of-type	p:only-of-type	選擇作為其父的唯一 <p> 元素的每個 <p> 元素。
:only-child	p:only-child	選擇作為其父的唯一子元素的 <p> 元素。
:optional	input:optional	選擇不帶 "required" 屬性的 <input> 元素。
:out-of-range	input:out-of-range	選擇值在指定范圍之外的 <input> 元素。
:read-only	input:read-only	選擇指定了 "readonly" 屬性的 <input> 元素。
:read-write	input:read-write	選擇不帶 "readonly" 屬性的 <input> 元素。
:required	input:required	選擇指定了 "required" 屬性的 <input> 元素。
:root	root	選擇元素的根元素。
:target	#news:target	選擇當前活動的 #news 元素（單擊包含該錨名稱的 URL）。
:valid	input:valid	選擇所有具有有效值的 <input> 元素。
:visited	a:visited	選擇所有已訪問的鏈接。

?

4.結構偽元素選擇器

選擇器例子例子描述

::after	p::after	在每個 <p> 元素之后插入內容。
::before	p::before	在每個 <p> 元素之前插入內容。
::first-letter	p::first-letter	選擇每個 <p> 元素的首字母。
::first-line	p::first-line	選擇每個 <p> 元素的首行。
::selection	p::selection	選擇用戶選擇的元素部分。

?

5.屬性選擇器

選擇器例子例子描述

[attribute]	[target]	選擇帶有 target 屬性的所有元素。
[attribute=value]	[target=_blank]	選擇帶有 target="_blank" 屬性的所有元素。
[attribute~=value]	[title~=flower]	選擇帶有包含 "flower" 一詞的 title 屬性的所有元素。
[attribute|=value]	[lang|=en]	選擇帶有以 "en" 開頭的 lang 屬性的所有元素。
[attribute^=value]	a[href^="https"]	選擇其 href 屬性值以 "https" 開頭的每個 <a> 元素。
[attribute$=value]	a[href$=".pdf"]	選擇其 href 屬性值以 ".pdf" 結尾的每個 <a> 元素。
[attribute*=value]	a[href*="w3school"]	選擇其 href 屬性值包含子串 "w3school" 的每個 <a> 元素。

與50位技術專家面對面20年技術見證，附贈技術全景圖

總結

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

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