Lösung für das Attributprioritätsproblem beim CSS-Schreiben

Dieser Artikel befasst sich hauptsächlich mit der Frage der Attributpriorität beim Schreiben von CSS und konzentriert sich auf die hierarchische Berechnung und die Vererbungsbeziehung zwischen Elementen. Freunde in Not können sich darauf beziehen.

Wenn Sie einen Stil hinzufügen, finden Sie ihn Es funktioniert bei einem Element nicht. Sie haben ein Prioritätsproblem. Wie sollten wir also mit CSS-Prioritätsproblemen umgehen? Im Folgenden habe ich einige allgemeine Regeln zur Lösung von CSS-Prioritätsproblemen zusammengefasst.

Stilabstand
Wir können bestimmte Stile zu Elementen hinzufügen, indem wir externe Stile, interne Stile, Inline-Stile usw. verwenden. Die Priorität ist derzeit:

Externer Stil Dies sollte einfacher zu verstehen sein, das heißt, je näher der Stil am Element ist, desto höher ist die Priorität. Zum Beispiel:

<style type="text/css">   
  p{color:blue;} //内部样式   
</style>   
<link rel="stylesheet" type="text/css" href="mystyle.css"/> //外部样式(color:green)   
<p style="color:red">my color</p>//内联样式

Die derzeit angezeigte Priorität ist Rot > Grün. Meine Farbe erscheint also als Rot.

Spezielle Berechnungsmethode
Angenommen, es gibt den folgenden Code:

<style type="text/css">   
  p p.classSelector {color: blue}   
  #idselector p {color: red}   
</style>   
<p id="idSelector">   
  <p class="classSelector">my color</p>   
</p>

Wir stehen vor dem folgenden CSS, wie um die Priorität zu bestimmen?

<style type="text/css">   
  p p.classSelector {color: blue}   
  #idselector p {color: red}   
</style>

Hier ist eine spezielle Berechnungsmethode:

Elemente, Pseudoelemente: 1 – (0,0,0,1)
Klasse, Pseudoklasse, Attribute: 1 – (0,0,1,0)
ID: 1 – (0,1,0,0)
Inline-Stil: 1 – (1,0,0,0)
Die Attribute beziehen sich hier auf:

Der Effekt ist wie folgt:

Die Priorität ist von Es nimmt von oben nach unten zu. Für die Berechnung gilt das gleiche Beispiel:

p: 1 Element – ​​​​(0,0,0,1)
p: 1 Element – ​​(0,0,0 ,1)
#idSelector: 1 ID – (0,1,0,0)
p#idSelector: 1 Element, 1 ID – (0,1,0, 1)
p #idSelector p: 2 Elemente, 1 ID – (0,1,0,2)
p #idSelector p.classSelector: 2 Elemente, 1 Klasse, 1 ID – (0,1,1 , 2)
Schauen wir uns nun noch einmal das obige Beispiel an:

p p.classSelector {color: blue} - (0,0,0,1) + (0,0,0,1) + (0,0,1,0) = (0,0,1,2)   
#idselector p {color: red} - (0,1,0,0) + (0,0,0,1) = (0,1,0,1)

Da die Priorität (0,1,0,1) > 0, 0,1,2), sodass wir wissen, dass die zuletzt angezeigte Farbe Rot ist.

Vererbung
Vererbung ist ein relativ leicht verständliches Konzept, das heißt, untergeordnete Elemente erben den Stil des übergeordneten Elements. Zum Beispiel:

<p style="color:red">   
  <p>my color</p>   
</p>

Die Spanne im obigen Beispiel erbt den Stil des übergeordneten Elements p. Aber nicht alle Attribute nutzen standardmäßig die Vererbung, wie zum Beispiel die Attribute margin und padding. Zum Beispiel:

<p style="margin:10px;padding:10px">   
  <p>my color</p>   
</p>

Zu diesem Zeitpunkt erbt Element p nicht die Rand- und Füllstile des übergeordneten Elements p, es sei denn, Sie tun Folgendes:

<p style="margin:10px;padding:10px">   
  <p style="margin:inherit;padding:inherit">my color</p>   
</p>

Zusammenfassung
1. Finden Sie zunächst alle Stile, die auf das Element wirken. (Geerbte Stile nicht ignorieren)
2. Berechnen Sie die Wirkungsentfernung des Stils. Je geringer die Entfernung, desto größer die Priorität.
3. Verwenden Sie spezielle Berechnungsmethoden, um Stile innerhalb des gleichen Abstands zu bestimmen.
4. Wenn die berechneten Ergebnisse gleich sind, überschreibt der später deklarierte Stil den zuvor deklarierten Stil.
5. Wenn !important in einem Stil festgelegt ist, hat dieser Stil unabhängig von seiner Priorität Vorrang. (Es sei denn, es ist unbedingt erforderlich, wird dringend davon abgeraten, diese Methode zu verwenden, da es sich zweifellos um eine Verwendung handelt, die nicht der CSS-Idee entspricht.)

Das obige ist der detaillierte Inhalt vonLösung für das Attributprioritätsproblem beim CSS-Schreiben. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!