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

基本選擇器

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

偽類和偽元素

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

動態偽類（Dynamic pseudo-classes）

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

選擇器實 例描 述版 本:linka:link匹配未被訪問的鏈接1:visiteda:visited匹配被訪問過的鏈接1:hovera:hover匹配鼠標指針在其浮動的元素1:activea:active匹配鼠標指針在其上按下的元素1:focusinput: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元素狀態偽類主要用于指定表單中的元素狀態。

選擇器實 例描 述版 本:enabledinput:enabled匹配啟動的元素3:disabledinput:disabled匹配禁用的元素3:checkedinput: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 規則后，可以將對應的規則提升到最高權重。

相關推薦：

css選擇器實例分享

CSS選擇器的新用法詳解

CSS選擇器字段解析的實現方法

以上就是CSS選擇器的優先級和權重分析的詳細內容，更多請關注php中文網其它相關文章！