在CSS特异性的计算中，如何计算点数

CSS特异性 是一种根据点数来区分或优先考虑不同CSS选择器的过程，选择器具有最高特异性点数的将获胜，并且该选择器的CSS样式将应用于该元素。

每个CSS选择器的点数层次结构如下表所示，具有它们的优先级：

序号	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元素。
步骤2 −然后，我们将使用CSS选择器选择该元素，并检查它们的优先级。

示例1

以下示例将说明不同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被应用于元素。