首頁 >web前端 >css教學 >CSS特異性的分數是如何計算的？

CSS特異性的分數是如何計算的？

王林轉載: 2023-09-14 14:09:142647瀏覽

CSS特異性的分數是如何計算的？

CSS特異性，是一種根據點數區分不同CSS選擇器或優先權的過程，具有最高特異性點數的選擇器將獲勝，並且此選擇器的CSS樣式將會套用於該元素。

每個 CSS 選擇器的點層次結構及其優先權如下表所示 -

的中文翻譯為：

Sr. No.	序號	CSS選擇器
1	元素選擇器	1
2	類別選擇器	10
3	ID選擇器	100
4	內聯CSS	1000
5	元素類別選擇器	1 10 = 11
6	元素 ID選擇器	1 100 = 101

使用案例 − 假設你有一個帶有類別和ID的元素，並且你想要使用類別選擇器和ID選擇器為它添加CSS樣式。在這種情況下，它將使用ID選擇器定義的CSS樣式，因為ID選擇器的特異性比類別選擇器高10倍。

現在讓我們藉助程式碼範例詳細了解這些選擇器之間的差異及其優先權。

步驟

步驟 1 - 在第一步中，我們將定義一個帶有類別和ID屬性的HTML元素。
第二步 - 在這一步驟中，我們將透過使用CSS選擇器選擇元素並檢查它們的優先權，為元素編寫CSS。

Example

的中文翻譯為：

範例

下面的範例將說明不同 CSS 選擇器之間的差異及其優先順序 -

<html>
<head>
   <style>
      /* CSS of the main Div using Class = 10 points and ID = 100 points selectors */
      #IdDemo {
         background-color: #84abb5;
         color: white;
         height: 150px;
         text-align: center;
      }
      .classDemo {
         background-color: green;
         color: white;
         height: 400px;
         text-align: end;
      }
      /* Heading Styles to show difference between only class = 10 points and element + class selector = 11 points */
      h2.demoH2Class {
         color: #e6d4b6;
         background-color: #414141;
      }
      .demoH2Class {
         color: red;
         background-color: white;
      }
   </style>
</head>
<body>
<div id = "IdDemo" class = "classDemo">
<h2 class = "demoH2Class" id = "demoH2ID"> This is Heading of Demo element. </h2>
</div>
</body>
</html>

在上面的範例中，我們透過在兩個不同的選擇器的幫助下選擇同一個元素，在同一個元素上使用了相同的CSS 屬性，我們可以清楚地看到具有較高特異性點的選擇器的CSS 應用於此元素。

範例 2

下面的範例將解釋更多 CSS 選擇器在其特殊點上的差異 -

<html>
<head>
   <style>
      /* CSS of the main Div using and element + ID = 101 points selectors */
      div#IdDemo {
         background-color: green;
         color: blue;
         height: 250px;
         text-align: start;
      }
      /* Heading Styles to show difference between only ID = 100 points and element + ID = 101 points selector */
      h2#demoH2ID {
         color: #e6d4b6;
         background-color: #414141;
      }
      #demoH2ID {
         color: red;
         background-color: white;
      }
   </style>
</head>
<body>
   <!-- CSS of the main div is given inline = 1000 points and inside the ID + element = 101 points -->
   <div id = "IdDemo" class = "classDemo"
      style = "background-color: #84abb5; color: white; height: 150px; text-align: center;">
      <h2 class = "demoH2Class" id = "demoH2ID">This is Heading of Demo element.</h2>
   </div>
</body>
</html>

在上面的範例中，我們再次使用了相同的CSS屬性，但在不同的CSS選擇器中使用了不同的值。在主div元素的情況下，我們使用了內聯和ID選擇器來應用CSS，但由於內聯選擇器的優先級遠高於ID選擇器，所以內聯CSS被應用到了該元素上。而在h2標題的情況下，我們使用了ID和元素 ID選擇器，後者的CSS特異性更高，因此元素 ID選擇器的CSS被應用到了該元素上。

結論

在本文中，我們不僅學習了CSS特異性點的計算，還詳細了解了不同CSS選擇器內部編寫的CSS的優先級與其特異性點之間的區別，並透過程式碼範例進行了實際操作。我們透過同時選擇不同選擇器來為相同元素賦予不同值的CSS屬性，從而看到了CSS選擇器之間的差異。

以上是CSS特異性的分數是如何計算的？的詳細內容。更多資訊請關注PHP中文網其他相關文章！

css html 选择器

陳述：

本文轉載於：tutorialspoint.com。如有侵權，請聯絡admin@php.cn刪除

上一篇：CSS 透視圖原點屬性下一篇：CSS 透視圖原點屬性

看更多