CSS選擇器的優先權與權重分析

<p>本文主要和大家分享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<p>子選擇器（Child selectors）p 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）

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

<p>

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

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

<p>

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

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

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

#符合指定lange="en" 的

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

<p>

元素

<p>3

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

#UI元素狀態偽類別（The UI element states pseudo-classes）	UI元素狀態偽類別主要用於指定表單中的元素狀態。
	##:enabled		#符合啟動的元素
##:disabled	input:disabled	符合停用的元素	#3

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

<p>

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

<p>

: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 個元素；取第奇數、偶數個子元素可寫表達式為
		選擇器	#實例

<p>

##: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####### #####

在CSS 1 和CSS 2 中，偽類選擇器中只有一個":"，而CSS 3 變成兩個"::"，是為了區分偽類與偽元素，目前這兩個寫法效果一致。 <p>::before 與 ::after 必須設定 content 屬性，否則元素不能生效。

優先權和權重

##   CSS 中的權重分別為4 個等級：<p>

• 內聯樣式（HTML 文件中的style屬性）<p>

• ID 選擇器<p>

• #類別、偽類別、屬性選擇器<p>

##元素、偽類元素
• <p>

這4 個等級由高到低代表不同的優先級，

!important<p> 寫在CSS 規則後，可以將對應的規則提升到最高權重。 相關推薦：

<p>

css選擇器實例分享<p>

CSS選擇器的新用法詳解<p>

CSS選擇器欄位解析的實作方法<p>

以上是CSS選擇器的優先權與權重分析的詳細內容。更多資訊請關注PHP中文網其他相關文章！