解碼 CSS 選擇器的優先權/特異性
P粉715274052
P粉715274052 2023-10-19 22:58:19

我想了解 CSS 選擇器如何處理屬性衝突。如何選擇一個屬性而不是另一個屬性?


#
div {
  background-color: red;
}

div.my_class {
  background-color: black;
}

div#my_id {
  background-color: blue;
}

body div {
  background-color: green;
}

body>div {
  background-color: orange;
}

body>div#my_id {
  background-color: pink;
}
<div id="my_id" class="my_class">hello</div>


#

選擇器優先權如何運作?

P粉715274052
P粉715274052

全部回覆(2)
P粉852114752

依序,1 是最低特異性,5 是最高特異性。 https://youtu.be/NqDb9GfMXuo 將顯示示範詳細資訊。

P粉384366923

我將添加一個指向 CSS 2.1 規範本身的鏈接,以及瀏覽器應該如何計算特異性:

CSS 2.1 第 6.4.3 節

如果特性相同,則 CSS 2.1 第 6.4.1 節 發揮作用:

請注意,這裡討論的是樣式定義的時間,而不是使用的時間。如果類別 .a.b 具有相同的特異性,則以樣式表中最後定義的那個為準。

...

...

的樣式相同,基於.a.b的定義順序。

熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!