Heim > Artikel > Web-Frontend > Wie wird der CSS-Spezifitätswert berechnet?

Wie wird der CSS-Spezifitätswert berechnet?

王林nach vorne: 2023-09-14 14:09:142615Durchsuche

CSS-Spezifität, ist ein Prozess der Unterscheidung oder Priorisierung verschiedener CSS-Selektoren basierend auf Punkten. Der Selektor mit den höchsten Spezifitätspunkten gewinnt und die CSS-Stile dieses Selektors werden auf dieses Element angewendet.

Die Punkthierarchie jedes CSS-Selektors und seine Priorität werden in der folgenden Tabelle angezeigt -

Die chinesische Übersetzung von lautet:

Sr. Nr.	Seriennummer	CSS-Selektor
1	Elementauswahl	1
2	Klassenauswahl	10
3	ID-Auswahl	100
4	Inline-CSS	1000
5	Element+Klassenauswahl	1 + 10 = 11
6	Element+ID-Selektor	1 + 100 = 101

Anwendungsfall – Angenommen, Sie haben ein Element mit einer Klasse und einer ID und möchten ihm mithilfe der Klassenauswahl und der ID-Auswahl CSS-Stile hinzufügen. In diesem Fall werden die vom ID-Selektor definierten CSS-Stile verwendet, da ID-Selektoren zehnmal spezifischer sind als Klassenselektoren.

Lassen Sie uns nun anhand von Codebeispielen den Unterschied zwischen diesen Selektoren und ihrer Priorität im Detail verstehen.

Schritte

Schritt 1 – Im ersten Schritt definieren wir ein HTML-Element mit Klassen- und ID-Attributen.
Schritt 2 – In diesem Schritt schreiben wir CSS für Elemente, indem wir sie mithilfe von CSS-Selektoren auswählen und ihre Priorität überprüfen.

Die chinesische Übersetzung von

Beispiel

lautet:

Beispiel

Das folgende Beispiel veranschaulicht die Unterschiede zwischen verschiedenen CSS-Selektoren und deren Vorrang -

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

Im obigen Beispiel haben wir dieselbe CSS-Eigenschaft für dasselbe Element verwendet, indem wir dasselbe Element mit Hilfe von zwei verschiedenen Selektoren ausgewählt haben, und wir können die Auswahl mit höheren Spezifitätspunkten deutlich sehen. Das CSS des Browsers wird auf das Element angewendet .

Beispiel 2

Das folgende Beispiel erklärt mehr über die Unterschiede von CSS-Selektoren in ihren besonderen Punkten -

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

Im obigen Beispiel haben wir dieselbe CSS-Eigenschaft erneut verwendet, jedoch mit unterschiedlichen Werten in verschiedenen CSS-Selektoren. Im Fall des Hauptelements div haben wir Inline- und ID-Selektoren verwendet, um das CSS anzuwenden. Da der Inline-Selektor jedoch eine viel höhere Priorität als der ID-Selektor hat, wurde das Inline-CSS auf das Element angewendet. Im Fall des h2-Headers haben wir ID- und Element+ID-Selektoren verwendet, deren CSS spezifischer ist, sodass das CSS des Element+ID-Selektors auf dieses Element angewendet wird.

Fazit

In diesem Artikel haben wir nicht nur die Berechnung von CSS-Spezifitätspunkten gelernt, sondern auch im Detail den Unterschied zwischen der Priorität von in verschiedenen CSS-Selektoren geschriebenem CSS und seinen Spezifitätspunkten kennengelernt und die Funktionsweise anhand von Codebeispielen geübt. Wir haben den Unterschied zwischen CSS-Selektoren erkannt, indem wir gleichzeitig verschiedene Selektoren ausgewählt haben, um CSS-Eigenschaften für dasselbe Element unterschiedliche Werte zuzuweisen.

Das obige ist der detaillierte Inhalt vonWie wird der CSS-Spezifitätswert berechnet?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

css html 选择器

Stellungnahme：

Dieser Artikel ist reproduziert unter:tutorialspoint.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen

Vorheriger Artikel：CSS-PerspektivursprungseigenschaftNächster Artikel：CSS-Perspektivursprungseigenschaft

In Verbindung stehende Artikel

Mehr sehen