CSS特異性的分?jǐn)?shù)是如何計(jì)算的？-魔扣目錄

CSS特異性，是一種根據(jù)點(diǎn)數(shù)區(qū)分不同CSS選擇器或優(yōu)先級(jí)的過(guò)程，具有最高特異性點(diǎn)數(shù)的選擇器將獲勝，并且該選擇器的CSS樣式將應(yīng)用于該元素。

每個(gè) CSS 選擇器的點(diǎn)層次結(jié)構(gòu)及其優(yōu)先級(jí)如下表所示 –

的中文翻譯為：

Sr. No.	序號(hào)	CSS選擇器
1	元素選擇器	1
2	類選擇器	10
3	ID選擇器	100
4	內(nèi)聯(lián)CSS	1000
5	元素+類選擇器	1 + 10 = 11
6	元素+ID選擇器	1 + 100 = 101

用例 ? 假設(shè)你有一個(gè)帶有類和ID的元素，并且你想要使用類選擇器和ID選擇器給它添加CSS樣式。在這種情況下，它將使用ID選擇器定義的CSS樣式，因?yàn)镮D選擇器的特異性比類選擇器高10倍。

現(xiàn)在讓我們借助代碼示例詳細(xì)了解這些選擇器之間的區(qū)別及其優(yōu)先級(jí)。

步驟

步驟 1 – 在第一步中，我們將定義一個(gè)帶有類和ID屬性的HTML元素。

第二步 – 在這一步中，我們將通過(guò)使用CSS選擇器選擇元素并檢查它們的優(yōu)先級(jí)，為元素編寫(xiě)CSS。

Example

的中文翻譯為：

示例

下面的示例將說(shuō)明不同 CSS 選擇器之間的差異及其優(yōu)先級(jí) –

<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>

登錄后復(fù)制

在上面的示例中，我們通過(guò)在兩個(gè)不同的選擇器的幫助下選擇同一個(gè)元素，在同一個(gè)元素上使用了相同的 CSS 屬性，我們可以清楚地看到具有較高特異性點(diǎn)的選擇器的 CSS 應(yīng)用于該元素。

示例 2

下面的示例將解釋更多 CSS 選擇器在其特殊點(diǎn)方面的差異 –

<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>

登錄后復(fù)制

在上面的例子中，我們?cè)俅问褂昧讼嗤腃SS屬性，但在不同的CSS選擇器中使用了不同的值。在主div元素的情況下，我們使用了內(nèi)聯(lián)和ID選擇器來(lái)應(yīng)用CSS，但由于內(nèi)聯(lián)選擇器的優(yōu)先級(jí)遠(yuǎn)遠(yuǎn)高于ID選擇器，所以內(nèi)聯(lián)CSS被應(yīng)用到了該元素上。而在h2標(biāo)題的情況下，我們使用了ID和元素+ID選擇器，后者的CSS特異性更高，因此元素+ID選擇器的CSS被應(yīng)用到了該元素上。

結(jié)論

在本文中，我們不僅學(xué)習(xí)了CSS特異性點(diǎn)的計(jì)算，還詳細(xì)了解了不同CSS選擇器內(nèi)部編寫(xiě)的CSS的優(yōu)先級(jí)與其特異性點(diǎn)之間的區(qū)別，并通過(guò)代碼示例進(jìn)行了實(shí)際操作。我們通過(guò)同時(shí)選擇不同選擇器來(lái)為同一元素賦予不同值的CSS屬性，從而看到了CSS選擇器之間的差異。

以上就是CSS特異性的分?jǐn)?shù)是如何計(jì)算的？的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注www.92cms.cn其它相關(guān)文章！