Heim > Web-Frontend > CSS-Tutorial > Hauptteil

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

高洛峰
Freigeben: 2017-03-13 17:40:49
Original
1343 Leute haben es durchsucht

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>//内联样式
Nach dem Login kopieren


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>
Nach dem Login kopieren


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>
Nach dem Login kopieren


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:
Lösung für das Attributprioritätsproblem beim CSS-Schreiben

Der Effekt ist wie folgt:
Lösung für das Attributprioritätsproblem beim CSS-Schreiben

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)
Nach dem Login kopieren


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>
Nach dem Login kopieren


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>
Nach dem Login kopieren


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>
Nach dem Login kopieren


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!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!