CSS選擇器的優先權與權重分析-js教程-PHP中文網

本文主要和大家分享CSS 選擇器的優先順序和權重分析，希望能幫助大家更掌握學習css選擇器。

基本選擇器

##描述#版本*通用選擇器（Universal selectors）符合所有的元素2.1E標籤選擇器（Type selectors）符合所有的#1.class類別選擇器（Class selectors）#符合所有#id#wrapperid="wrapper"E[attr]a[data-url]data-urlE[attr=val]a[data-url=' http']data-url="http"E[attr~=val]a[data-url~='http'] data-urlE[attr^=val]#屬性選擇器（Attribute selectors）屬性以E[attr$=val]屬性選擇器（Attribute selectors）屬性以E[attr*=val]屬性選擇器（Attribute selectors）##a[data-url*='http ']http後代選擇器（Descendant selectors）p p子選擇器（Child selectors）p p#相鄰兄弟選擇器label + input兄弟選擇器label ~ input#選擇器分組label,input偽類和偽元素偽類（Pseudo-classes）用於指定選擇器的某種特定狀態或條件，偽類在DOM 中並不存在，但對使用者是可見的。

#選擇器	#名稱	實例
		*
		p	<p>
		.nav	class="nav" `的元素`##1
ID選擇器（ID selectors）		都符合所有	的元素1
屬性選擇器（Attribute selectors）		符合所有	屬性的`<a>` 的元素2.1
屬性選擇器（Attribute selectors）		符合所有	屬性的`<a>` 的元素2.1
#屬性選擇器（Attribute selectors）		符合所有	屬性包含`http` 的`<a>` 元素`##2.1`
	a[data-url^='http']	`符合所有`data-url	http `開頭的`<a> `元素3`
	a[data-url$='http' ]	`符合所有`data-url	http`# 結尾的`<a> `元素3`
		符合所有`data-url` 屬性包含	# 的`<a>` 元素3	E F
		符合所有 `<p>` 元素下所有	元素1	E > F
		#符合所有`<p>` 元素下所有子	元素2.1	E + F
		符合所有 `<label>` 元素同級的第一個	元素2.1	#E ~ F
		符合所有 `<label>` 元素同級的所有	元素3	#S1,S2,.....
		匹配所有 `<label>,<input>` 元素	#1

動態偽類（Dynamic pseudo-classes）

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

選擇器#實例符合未被存取的連結1#符合被造訪過的連結1符合滑鼠指標在其浮動的元素1符合滑鼠指標在上面按下的元素1符合獲得焦點的元素#2.1

描述
	`##:link`	a:link
	`#:visited`	a:visited
	`:hover`	a:hover
	`:active`	a:active
	`:focus`	input:focus

目標偽類別（The target pseudo-classes）目標偽類別指定目前活動的錨，使用目標偽類別可以為活動的錨設定樣式。選擇器#實例描述##:target

####tab1:target##########符合活動的錨定######3######### ###

語言偽類別（The language pseudo-classes）

語言偽類別向帶有指定 lang 屬性元素新增樣式。

#符合指定lange="en" 的

選擇器	#實例	描述
		`##:lang(val)`#p:lang(en)

元素

3

選擇器#實例描述input:enabled##3##:checked

#UI元素狀態偽類別（The UI element states pseudo-classes）	UI元素狀態偽類別主要用於指定表單中的元素狀態。

	##:enabled		#符合啟動的元素
##:disabled	`input:disabled`	符合停用的元素	#3

input:checked#符合被選取的元素3

display 和visibilityenabled/disabled選擇器#實例:root:nth-child(n):nth-last-child(n):nth-of-type (n):nth-last-of-type(n)#:first-child :last-child :last-child :first-of-type:first-of-type:only-child:only-child

屬性對於UI元素狀態偽類別符合	狀態沒有影響。	結構性偽類（Structural pseudo-classes）
	`描述`
		##:root
符合文件的根元素	3	#:nth-child(n)
#符合其父元素的第n 個子元素	3	:nth-last-child(n)
#符合其父類別倒數第n 個子元素	3	:nth-of-type(n)
符合其父類別第n 個有著相同選擇器的子元素	#3	:nth-last- of-type(n)
符合其父類別倒數第n 個有著相同選擇器的子元素	3	:first-child
符合其父類別元素的第一個子元素	3	:last-child
#符合其父類別元素的最後一個子元素	3	:last-child
符合其父類別元素的最後一個子元素	3	#:first-of-type
符合其父類別元素第一個有著相同選擇器的子元素	3	: last-of-type
#符合其父類別元素最後一個有著相同選擇器的子元素	3	:only-child
符合其父類別的唯一子元素	3	:only-of-type

符合其父類別的唯一有著相同選擇器的子元素

3:empty:empty對沒有子元素（包含文字節點）的元素3

:nth-child(n)、:nth- last-child(n)、、中an+b2n+1 或even、2n 或odd。否定偽類別是用來選擇所有非指定類型元素的其他元素。描述

:nth-of-type(n)	:nth-last-of-type(n)	n 是從0 開始的整數，表達式可寫成	， a 和b 是0 或正整數，表達式的寫法相當於把每a 個子元素分成一組，取每組的第b 個元素；取第奇數、偶數個子元素可寫表達式為
		選擇器	#實例

##:not(s)input:not([type="text"])符合所有非指定類型的其他元素3選擇器描述::first-line::first-letter


	偽元素	偽元素（Pseudo-elements）是指不存在與文件樹中的抽象。
`#實例`
		##::first-line
#符合元素文字內容的首行#1		::first-letter

######符合元素文字內容的首個字母#### ##1############::before#########::before#########」元素之前#######2.1## ##########::after#########::after##########元素之後######2.1####### #####