css選擇器的優先級以及用法

在 CSS 中，當多個選擇器同時作用于一個元素，并且為該元素的同一屬性設置了不同的值時，就需要依據選擇器的優先級來確定最終應用哪個樣式。本文詳細介紹 CSS 選擇器優先級的相關內容。

本文目錄

- - 一、單個選擇器的優先級
  - - 1. 內聯樣式
    - 2. ID 選擇器
    - 3. 類選擇器、屬性選擇器和偽類選擇器
    - 4. 元素選擇器和偽元素選擇器
    - 5. 通用選擇器和組合器
  - 二、多個優先級計算規則
  - 三、!important 聲明

一、單個選擇器的優先級

1. 內聯樣式

直接寫在 HTML 元素的 style 屬性中的樣式。

<p style="color: red;">使用內聯樣式的段落</p>

優先級：內聯樣式具有最高的優先級，因為它直接作用于元素，會覆蓋其他所有類型選擇器定義的樣式。

2. ID 選擇器

通過元素的 id 屬性來選擇元素，使用 # 符號開頭。

<!DOCTYPE html>
<html lang="en"><head><style>#unique-paragraph {color: blue;}</style>
</head><body><p id="unique-paragraph">使用 ID 選擇器設置樣式的段落</p>
</body></html>

優先級：ID 選擇器的優先級僅次于內聯樣式，因為 id 在一個頁面中是唯一的，它能精確地定位到特定元素。

3. 類選擇器、屬性選擇器和偽類選擇器

類選擇器
通過元素的 class 屬性來選擇元素，使用 . 符號開頭。

<!DOCTYPE html>
<html lang="en"><head><style>.highlight {background-color: yellow;}</style>
</head><body><p class="highlight">使用類選擇器設置樣式的段落</p>
</body></html>

屬性選擇器
根據元素的屬性及其值來選擇元素，例如 [attribute=value] 的形式。

<!DOCTYPE html>
<html lang="en"><head><style>input[type="text"] {border: 1px solid gray;}</style>
</head><body><input type="text" placeholder="請輸入文本">
</body></html>

偽類選擇器
用于選擇處于特定狀態的元素，如 :hover（鼠標懸停狀態）、:active（元素被激活狀態）等。

<!DOCTYPE html>
<html lang="en"><head><style>a:hover {color: red;}</style>
</head><body><a href="#">鏈接</a>
</body></html>

優先級：類選擇器、屬性選擇器和偽類選擇器的優先級相同，它們的優先級低于 ID 選擇器，但高于元素選擇器。

4. 元素選擇器和偽元素選擇器

元素選擇器
通過元素的標簽名來選擇元素，如 p、h1、div 等。

<!DOCTYPE html>
<html lang="en"><head><style>p {font-size: 16px;}</style>
</head><body><p>使用元素選擇器設置樣式的段落</p>
</body></html>

偽元素選擇器
用于選擇元素的特定部分，如 ::first-line（選擇元素的第一行）、::first-letter（選擇元素的第一個字母）等。

<!DOCTYPE html>
<html lang="en"><head><style>p::first-line {color: green;}</style>
</head><body><p>第一行文字會顯示為綠色。</p>
</body></html>

優先級：元素選擇器和偽元素選擇器的優先級相同，是優先級較低的選擇器類型。

5. 通用選擇器和組合器

通用選擇器
使用 * 符號表示，它可以選擇頁面中的所有元素。

<!DOCTYPE html>
<html lang="en"><head><style>* {margin: 0;padding: 0;}</style>
</head><body><!-- 頁面內容 -->
</body></html>

組合器：如 +（相鄰兄弟組合器）、~（通用兄弟組合器）、>（子組合器）、（后代組合器）等，它們本身不具有優先級，只是用于組合其他選擇器。
優先級：通用選擇器的優先級是最低的，組合器的優先級取決于與之組合的選擇器。

二、多個優先級計算規則

當多個選擇器同時作用于一個元素時，可以通過計算每個選擇器的優先級得分來確定最終應用的樣式。通常采用以下規則來計算優先級：

內聯樣式：計為 1000 分。
ID 選擇器：每個 ID 選擇器計為 100 分。
類選擇器、屬性選擇器和偽類選擇器：每個計為 10 分。
元素選擇器和偽元素選擇器：每個計為 1 分。
通用選擇器：計為 0 分。

下面按照上面進行分析

<!DOCTYPE html>
<html lang="en"><head><style>/* 元素選擇器，優先級為 1 分 */p {color: black;}/* 類選擇器，優先級為 10 分 */.text-style {color: blue;}/* ID 選擇器，優先級為 100 分 */#special-paragraph {color: red;}</style>
</head><body><p>普通段落，文字顏色為黑色</p><p class="text-style">使用類選擇器設置樣式的段落，文字顏色為藍色</p><p id="special-paragraph" class="text-style">同時使用 ID 選擇器和類選擇器的段落，文字顏色為紅色，因為 ID 選擇器優先級更高</p>
</body></html>

第三個段落同時應用了 ID 選擇器和類選擇器，但由于 ID 選擇器的優先級（100 分）高于類選擇器（10 分），所以最終文字顏色為紅色。

三、!important 聲明

在 CSS 中，還可以使用 !important 聲明來強制應用某個樣式，無論該樣式的選擇器優先級如何。

p {color: green!important;
}

使用 !important 聲明的樣式會覆蓋其他所有樣式

← 上一篇 AngularJS知識快速入門（上）

記得點贊、關注、收藏哦！

下一篇 Ajax——在OA系統提升性能的局部刷新 →

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/pingmian/88657.shtml
繁體地址，請注明出處：http://hk.pswp.cn/pingmian/88657.shtml
英文地址，請注明出處：http://en.pswp.cn/pingmian/88657.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！