【CSS 學習】CSS 選擇器、選擇器的優(yōu)先級和權重

jerry 發(fā)布于2019-08-30 14:03 / 3705人閱讀

摘要：優(yōu)先級和權重中的權重分別為個等級內(nèi)聯(lián)樣式文檔中的屬性選擇器類偽類屬性選擇器元素偽類元素這個等級由高到低代表不同的優(yōu)先級，寫在規(guī)則后，可以將對應的規(guī)則提升到最高權重。

以下總結內(nèi)容摘自 《移動Web前端高效開發(fā)實戰(zhàn)》

基本選擇器

選擇器	名稱	實例	描述	版本
*	通用選擇器（Universal selectors）	*	匹配所有的元素	2.1
E	標簽選擇器（Type selectors）	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 屬性的的元素	2.1
E[attr=val]	屬性選擇器（Attribute selectors）	a[data-url="http"]	匹配所有 data-url="http" 屬性的的元素	2.1
E[attr~=val]	屬性選擇器（Attribute selectors）	a[data-url~="http"]	匹配所有 data-url 屬性包含 http 的元素	2.1
E[attr^=val]	屬性選擇器（Attribute selectors）	a[data-url^="http"]	匹配所有 data-url 屬性以 http 開頭的元素	3
E[attr$=val]	屬性選擇器（Attribute selectors）	a[data-url$="http"]	匹配所有 data-url 屬性以 http 結尾的元素	3
E[attr*=val]	屬性選擇器（Attribute selectors）	*a[data-url="http"]**	匹配所有 data-url 屬性包含 http 的元素	3
E F	后代選擇器（Descendant selectors）	div p	匹配所有元素下所有元素	1
E > F	子選擇器（Child selectors）	div p	匹配所有元素下所有子元素	2.1
E + F	相鄰兄弟選擇器	label + input	匹配所有元素同級的第一個元素	2.1
E ~ F	兄弟選擇器	label ~ input	匹配所有元素同級的所有元素	3
S1,S2,.....	選擇器分組	label,input	匹配所有 , 元素	1

偽類和偽元素

??偽類（Pseudo-classes）用于指定選擇器的某種特定狀態(tài)或條件，偽類在 DOM 中并不存在，但對用戶卻是可見的。

動態(tài)偽類（Dynamic pseudo-classes）

??動態(tài)偽類對除了其名稱、屬性或內(nèi)容之外的特性的元素進行分類，不會顯示在文檔源或文樹中。

選擇器	實例	描述	版本
: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" 的元素	3

UI元素狀態(tài)偽類（The UI element states pseudo-classes）

??UI元素狀態(tài)偽類主要用于指定表單中的元素狀態(tài)。

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

display 和 visibility 屬性對于UI元素狀態(tài)偽類匹配 enabled/disabled 狀態(tài)沒有影響。

結構性偽類（Structural pseudo-classes）

??結構性偽類用于指定文檔的特定結構。

選擇器	實例	描述	版本
:root	:root	匹配文檔的根元素	3
:nth-child(n)	:nth-child(n)	匹配其父元素的第 n 個子元素	3
:nth-last-child(n)	:nth-last-child(n)	匹配其父類倒數(shù)第 n 個子元素	3
:nth-of-type(n)	:nth-of-type(n)	匹配其父類第 n 個有著相同選擇器的子元素	3
:nth-last-of-type(n)	:nth-last-of-type(n)	匹配其父類倒數(shù)第 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	匹配沒有子元素（包括文字節(jié)點）的元素	3

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

??否定偽類是用來選擇所有非指定類型元素的其他元素。

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

偽元素

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

選擇器	實例	描述	版本
::first-line	::first-line	匹配元素文本內(nèi)容的首行	1
::first-letter	::first-letter	匹配元素文本內(nèi)容的首個字母	1
::before	::before	元素之前	2.1
::after	::after	元素之后	2.1

在 CSS 1 和 CSS 2 中，偽類選擇器中只有一個 ":"，而 CSS 3 變?yōu)閮蓚€ "::"，是為了區(qū)分偽類與偽元素，目前這兩個寫法效果一致。

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

優(yōu)先級和權重

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

內(nèi)聯(lián)樣式（HTML 文檔中的 style 屬性）

ID 選擇器

類、偽類、屬性選擇器

元素、偽類元素

這 4 個等級由高到低代表不同的優(yōu)先級，!important 寫在 CSS 規(guī)則后，可以將對應的規(guī)則提升到最高權重。

??github 原文地址歡迎 Star 和 Watch

云服務器 GPU云服務器 css選擇器基礎選擇器css css選擇優(yōu)先選擇

文章版權歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/115734.html

[譯]HTML&CSS Lesson3: 了解CSS

摘要：我們會在組合選擇器中來了解為什么權重值要加連字符。組合選擇器中的權重值會分別對不同類型的選擇器進行計數(shù)。對比兩組選擇器，第二組選擇器有兩個選擇器，擁有更高的權重值。 CSS是一門復雜的語言，擁有相當?shù)拇竽芰Α?它我們允許為頁面添加布局和設計，允許多個元素甚至多個頁面共享樣式。在我們有能力解鎖所有功能之前，我們必須先充分理解它的基礎點。首先，我們要明確的了解樣式是怎么被渲染的。具體的...

lavnFan 2019-08-01 17:17 評論0 收藏0
[譯]HTML&CSS Lesson3: 了解CSS

摘要：我們會在組合選擇器中來了解為什么權重值要加連字符。組合選擇器中的權重值會分別對不同類型的選擇器進行計數(shù)。對比兩組選擇器，第二組選擇器有兩個選擇器，擁有更高的權重值。 CSS是一門復雜的語言，擁有相當?shù)拇竽芰Α?它我們允許為頁面添加布局和設計，允許多個元素甚至多個頁面共享樣式。在我們有能力解鎖所有功能之前，我們必須先充分理解它的基礎點。首先，我們要明確的了解樣式是怎么被渲染的。具體的...

soasme 2019-08-29 13:04 評論0 收藏0
CSS學習筆記(十六) CSS最佳實踐之可維護性篇

摘要：國內(nèi)各大公司都已經(jīng)投入使用，在一些常見的網(wǎng)站，如淘寶騰訊小米等移動站點，隨處可見其蹤影。變革之騰訊手機淘寶的設計與實現(xiàn)前端亂燉適配總結樣式重置上文已提及，這里推薦閱讀同學寫的專題文章。前言 CSS代碼難維護眾所皆知。為一個元素設置樣式的方式可以通過定義的class、定義的id、元素的標簽名、元素的屬性等選擇器以及這些選擇器的組合來實現(xiàn)；作用于某個元素上的樣式又可能來自單個樣式規(guī)...

newtrek 2019-08-28 18:21 評論0 收藏0
CSS學習筆記(十六) CSS最佳實踐之可維護性篇

摘要：國內(nèi)各大公司都已經(jīng)投入使用，在一些常見的網(wǎng)站，如淘寶騰訊小米等移動站點，隨處可見其蹤影。變革之騰訊手機淘寶的設計與實現(xiàn)前端亂燉適配總結樣式重置上文已提及，這里推薦閱讀同學寫的專題文章。前言 CSS代碼難維護眾所皆知。為一個元素設置樣式的方式可以通過定義的class、定義的id、元素的標簽名、元素的屬性等選擇器以及這些選擇器的組合來實現(xiàn)；作用于某個元素上的樣式又可能來自單個樣式規(guī)...

keke 2019-08-01 14:55 評論0 收藏0
CSS中選擇器的權重值

摘要：內(nèi)聯(lián)樣式外部樣式選擇器類型選擇器栗子標簽屬性偽類偽元素相鄰選擇器子代選擇器權重計算規(guī)則內(nèi)聯(lián)樣式，如，權值為。選擇器，如，權值為。之所以有這樣的錯覺，是因為確實行間為第一等的權重，所以它的權重是最高的。通配符子選擇器相鄰選擇器等的。 CSS 具有自己的優(yōu)先級計算方法，而不僅僅是行間>內(nèi)部>外部、ID>class>元素 1. 樣式類型行間樣式我的行間CSS樣式。內(nèi)聯(lián)樣式 h1{...

BlackHole1 2019-08-29 14:17 評論0 收藏0