【CSS 學習】CSS 選擇器、選擇器的優先級和權重

如下總結內容摘自 《移動Web前端高效開發實戰》

基本選擇器

選擇器	名 稱	實 例	描 述	版 本
*	通用選擇器（Universal selectors）	*	匹配全部的元素	2.1
E	標籤選擇器（Type selectors）	p	匹配全部的 <p>	1
.class	類選擇器（Class selectors）	.nav	匹配全部 class="nav" 的元素	1
#id	ID選擇器（ID selectors）	#wrapper	匹配全部 id="wrapper" 的元素	1
E[attr]	屬性選擇器（Attribute selectors）	a[data-url]	匹配全部 data-url 屬性的 <a> 的元素	2.1
E[attr=val]	屬性選擇器（Attribute selectors）	a[data-url='http']	匹配全部 data-url="http" 屬性的 <a> 的元素	2.1
E[attr~=val]	屬性選擇器（Attribute selectors）	a[data-url~='http']	匹配全部 data-url 屬性包含 http 的 <a> 元素	2.1
E[attr^=val]	屬性選擇器（Attribute selectors）	a[data-url^='http']	匹配全部 data-url 屬性以 http 開頭的 <a> 元素	3
E[attr$=val]	屬性選擇器（Attribute selectors）	a[data-url$='http']	匹配全部 data-url 屬性以 http 結尾的 <a> 元素	3
E[attr*=val]	屬性選擇器（Attribute selectors）	a[data-url*='http']	匹配全部 data-url 屬性包含 http 的 <a> 元素	3
E F	後代選擇器（Descendant selectors）	div p	匹配全部 <div> 元素下全部 <p> 元素	1
E > F	子選擇器（Child selectors）	div p	匹配全部 <div> 元素下全部子 <p> 元素	2.1
E + F	相鄰兄弟選擇器	label + input	匹配全部 <label> 元素同級的第一個 <input> 元素	2.1
E ~ F	兄弟選擇器	label ~ input	匹配全部 <label> 元素同級的全部 <input> 元素	3
S1,S2,.....	選擇器分組	label,input	匹配全部 <label>,<input> 元素	1

僞類和僞元素

  僞類（Pseudo-classes）用於指定選擇器的某種特定狀態或條件，僞類在 DOM 中並不存在，但對用戶倒是可見的。

動態僞類（Dynamic pseudo-classes）

  動態僞類對除了其名稱、屬性或內容以外的特性的元素進行分類，不會顯示在文檔源或文樹中。

選擇器	實 例	描 述	版 本
:link	a:link	匹配未被訪問的連接	1
:visited	a:visited	匹配被訪問過的連接	1
:hover	a:hover	匹配鼠標指針在其浮動的元素	1
:active	a:active	匹配鼠標指針在其上按下的元素	1
:focus	input:focus	匹配得到焦點的元素	2.1

目標僞類（The target pseudo-classes）

  目標僞類指定當前活動的錨，使用目標僞類能夠爲活動的錨設置樣式。

選擇器	實 例	描 述	版 本
:target	#tab1:target	匹配活動的錨	3

語言僞類（The language pseudo-classes）

  語言僞類向帶有指定 lang 屬性元素添加樣式。

選擇器	實 例	描 述	版 本
:lang(val)	#p:lang(en)	匹配帶有指定 lange="en" 的 <p> 元素	3

UI元素狀態僞類（The UI element states pseudo-classes）

  UI元素狀態僞類主要用於指定表單中的元素狀態。

選擇器	實 例	描 述	版 本
:enabled	input:enabled	匹配啓動的元素	3
:disabled	input:disabled	匹配禁用的元素	3
:checked	input:checked	匹配被選中的元素	3

display 和 visibility 屬性對於UI元素狀態僞類匹配 enabled/disabled 狀態沒有影響。

結構性僞類（Structural pseudo-classes）

  結構性僞類用於指定文檔的特定結構。

選擇器	實 例	描 述	版 本
:root	:root	匹配文檔的根元素	3
:nth-child(n)	:nth-child(n)	匹配其父元素的第 n 個子元素	3
:nth-last-child(n)	:nth-last-child(n)	匹配其父類倒數第 n 個子元素	3
:nth-of-type(n)	:nth-of-type(n)	匹配其父類第 n 個有着相同選擇器的子元素	3
:nth-last-of-type(n)	:nth-last-of-type(n)	匹配其父類倒數第 n 個有着相同選擇器的子元素	3
:first-child	:first-child	匹配其父類元素的第一個子元素	3
:last-child	:last-child	匹配其父類元素的最後一個子元素	3
:last-child	:last-child	匹配其父類元素的最後一個子元素	3
:first-of-type	:first-of-type	匹配其父類元素第一個有着相同選擇器的子元素	3
:last-of-type	:first-of-type	匹配其父類元素最後一個有着相同選擇器的子元素	3
:only-child	:only-child	匹配其父類的惟一子元素	3
:only-of-type	:only-child	匹配其父類的惟一有着相同選擇器的子元素	3
:empty	:empty	匹配沒有子元素（包括文字節點）的元素	3

:nth-child(n)、 :nth-last-child(n)、 :nth-of-type(n)、 :nth-last-of-type(n) 中 n 是從 0 開始的整數，表達式可寫成 an+b， a 和 b 是 0 或正整數，表達式的寫法至關於把每 a 個子元素分紅一組，取每組的第 b 個元素；取第奇數、偶數個子元素可寫表達式爲 2n+1 或 even、2n 或 odd。

  否認僞類是用來選擇全部非指定類型元素的其餘元素。

選擇器	實 例	描 述	版 本
:not(s)	input:not([type="text"])	匹配全部非指定類型的其餘元素	3

僞元素

  僞元素（Pseudo-elements）是指不存在與文檔樹中的抽象。

選擇器	實 例	描 述	版 本
::first-line	::first-line	匹配元素文本內容的首行	1
::first-letter	::first-letter	匹配元素文本內容的首個字母	1
::before	::before	元素以前	2.1
::after	::after	元素以後	2.1

在 CSS 1 和 CSS 2 中，僞類選擇器中只有一個 ":"，而 CSS 3 變爲兩個 "::"，是爲了區分僞類與僞元素，目前這兩個寫法效果一致。

::before 與 ::after 必須設置 content 屬性，不然元素不能生效。

優先級和權重

   CSS 中的權重分別爲 4 個等級：

• 內聯樣式（HTML 文檔中的 style 屬性）
• ID 選擇器
• 類、僞類、屬性選擇器
• 元素、僞類元素

這 4 個等級由高到低表明不一樣的優先級，!important 寫在 CSS 規則後，能夠將對應的規則提高到最高權重。

  github 原文地址 歡迎 Star 和 Watch