css選擇器

​

選擇器的類型

1. 基本選擇器
2. 組合選擇器
3. 屬性選擇器
4. 僞類選擇器
5. 僞元素選擇器

1. 基本選擇器

選擇器	含義	作用
.class	類選擇器	選擇class包含特定類的元素
.#id	id選擇器	選擇包含特定id的元素
*	通用元素選擇器	選擇頁面中所有的元素
E	元素選擇器	選擇指定類型的HTML元素（如p,img）
select1 ,select2	群組選擇器	将具有相同屬性的元素合并

2. 層次選擇器

E F	後代選擇器（包含選擇器）	選擇E标簽下的所有F元素
E>f	子選擇器	僅選擇E标簽下的兒子級别的元素
E+F	相鄰兄弟選擇器	選擇與E元素同級别的第一個F元素
E~F	普通相鄰選擇器	選擇與E元素同級别的所有F元素

3. 僞類選擇器

3.1. 動态僞類選擇器

E:link	連結僞類選擇器	選擇比對的E元素，E被定義了超連結且并未通路過。常用與連結錨點
E:visited		選擇比對的E元素，E被定義了超連結且已被通路。常用與連結錨點
E: active	使用者行為僞類選擇器	選擇比對的E元素，且比對元素已被激活。常用與錨點與按鈕上
E:hover		選擇比對的E元素，且使用者滑鼠停留在E元素上
		選擇比對的E元素，且比對的元素獲得焦點

3.2. 目标僞類選擇器

E:target	選擇比對E的所有元素，且比對元素指向被相關的URL指向

3.3. UI元素狀态僞類選擇器–主要與表單相關

	示例
:disable	input:disable	選擇所有禁用的表單元素
:enable		選擇沒有設定disable屬性的表單元素
:in-range	input:in-range	選擇指定區域内的元素
:out-of-range	input:out-of-range	選擇不再指定區域内的元素
:valid	input:valid	選擇條件驗證正确的表單元素
:invaild	input:invalid	選擇條件驗證錯誤的表單元素
:required	input:required	選擇設定 required 屬性的表單元素
:checked	input:checked	比對被選中的 input 元素，input 元素包括 radio 和 checkbox
:read-only	input:read-only	選擇設定 readonly 隻讀屬性的元素

3.4. 語言僞類選擇器

:lang(language)	比對設定了特定語言的元素。	設定特定語言可以通過為了 HTML 元素設定 lang=”” 屬性，設定 meta 元素的 charset=”” 屬性，或者是在 http 頭部上設定語言屬性。實際上，lang=”” 屬性不隻可以在 html 标簽上設定，也可以在其他的元素上設定。

3.5. 結構化類選擇器

E:root	選擇比對E元素所在文檔的根元素。在HTML文檔中，根元素始終是html，此時該選擇器與html類型的選擇器比對的内容相同
:first - child	p:first-child	選擇p元素的第一個子元素
:first-of-type	p:first-of-type	選擇每個父元素是p元素的第一個p子元素
:last-child	p:last-child	選擇所有p元素的最後一個子元素
:last-of-type	p:last-of-type	選擇每個p元素是其母元素的最後一個p元素
:not(selector)	:not§	選擇所有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的元素
:only-child	p:only-child	選擇所有僅有一個子元素的p元素
:target	#news:target	選擇目前活動#news元素(點選URL包含錨的名字)

4. 僞元素選擇器

4.1. 單雙冒号

		說明
::before/:before	在被選元素前插入内容。	需要使用 content 屬性來指定要插入的内容。被插入的内容實際上不在文檔樹中。
::after/:after	在選被元素後插入内容	其用法和特性與:before相似。
::first-letter/:first-letter	比對元素中文本的首字母。	被修飾的首字母不在文檔樹中。
::first-line/:first-line	比對元素中第一行的文本。	這個僞元素隻能用在塊元素中，不能用

4.2. 僅雙冒号

::selection	比對被使用者選中或者處于高亮狀态的部分。	在火狐浏覽器使用時需要添加 -moz 字首。
::placeholder	比對占位符的文本。	隻有元素設定了 placeholder 屬性時，該僞元素才能生效。該僞元素不是 CSS 的标準，它的實作可能在将來會有所改變，
::backdrop	用于改變全屏模式下的背景顔色。	全屏模式的預設顔色為黑色。(試驗階段)

5. 屬性選擇器

E[attribute]	[target] 選擇所有帶有target屬性元素
E[attribute=value]	[target=-blank]	選擇所有使用target="-blank"的E元素
E[attribute~=value]	[title~=flower]	選擇标題屬性包含單詞"flower"的所有E元素
E[attribute ^= language]	[lang ^= en]	選擇一個lang屬性的起始值="EN"的所有E元素
E[attribute $= language]	[lang $= en]	選擇一個lang屬性的結尾值="EN"的所有E元素
E[attribute *= language]	[lang *= en]	選擇一個lang屬性的包含"EN"的所有E元素