Drei Hauptfunktionen von CSS, die Sie kennen müssen

Dieses Mal werde ich Ihnen die drei Hauptfunktionen von CSS vorstellen, die Sie kennen müssen. Was sind die Vorsichtsmaßnahmen für die Verwendung der drei Hauptfunktionen von CSS? Hier sind praktische Fälle.

Drei Hauptmerkmale von CSS: Vererbung, Kaskadierung, Priorität

1. Vererbung

1. Funktion: zum Festlegen von übergeordneten Elementen einige Attribute, die auch von Unterelementen verwendet werden können

Hinweis:

1 Nicht alle Attribute können vererbt werden, nur diejenigen mit kann vererbt werden

2. Bei der CSS-Vererbung können nicht nur Söhne, sondern auch Nachkommen erben

3. Spezialität in der Vererbung

3.1 Die Textfarbe und die Unterstreichung des a-Tags können nicht vererbt werden ( das heißt, sie können nicht vererbt werden. Erhalten)

3.2 Die Textgröße des h-Tags kann nicht vererbt werden (das heißt, sie kann nicht durch Vererbung erhalten werden)

Anwendungsszenarien:

wird im Allgemeinen verwendet, um einige allgemeine Informationen auf der Webseite festzulegen, wie z. B. die Textfarbe, Schriftart, Textgröße usw.

2. Kaskadierung

1. Was ist Kaskadierung?

Funktion: Kaskadierung ist die Fähigkeit von CSS, mit Konflikten umzugehen

Hinweise:

Kaskadierung erfolgt nur, wenn „dasselbe Tag“ in mehreren Selektoren ausgewählt und dann das „gleiche Attribut“ festgelegt ist

CSS-vollständiger Name Cascading StyleSheet (Cascading Style Sheet)

Aufgeführt als:

<style>
        p{            color: red;
        }        .para{            color: blue;
        } </style>
 <p id="identity" class="para">我是段落</p>

1. Was ist Priorität

Funktion: Wenn mehrere Selektoren ausgewählt sind, wenn dasselbe Tag und dieselben Attribute vorhanden sind Sind für dasselbe Tag festgelegt, wird die Kaskadierung durch die Priorität bestimmt

2. Drei Arten der Prioritätsbeurteilung

2.1 Indirekte Auswahl bezieht sich auf Vererbung

2.2 Gleicher Selektor (Direktauswahl)

2.3 Verschiedene Selektoren (Direktauswahl)

id>Class>Tag>Wildcard>Inheritance>Browser Default

id>Class>Tag>Pass>Inherit>Browse

4. !important

1 !important

Funktion: Wird verwendet, um die Priorität eines Attributs in einem Selektor zu erhöhen, der ein Tag direkt auswählt. Die Priorität des angegebenen Attributs kann auf die höchste Ebene angehoben werden

Hinweis:

1.!important kann nur für die direkte Auswahl verwendet werden, kann nicht für die indirekte Auswahl verwendet werden

2. Das vom Wildcard-Selektor ausgewählte Tag wird ebenfalls direkt ausgewählt. Sie können auch !important verwenden, um die Priorität zu erhöhen

3.!important kann nur die Priorität des angegebenen Attributs erhöhen. Die Priorität anderer Attribute wird nicht erhöht

4.!important muss vor dem Semikolon des Attributwerts geschrieben werden

Das Ausrufezeichen vor!important darf nicht weggelassen werden

 <style>
      p{
         color: red !important; //提升优先级到最高
         font-size: 30px; //不会提升优先级(说明了上面的第3点)
       }  </style>

1. Was ist die Gewichtung der Priorität?

Funktion: Wenn mehrere Selektoren zusammengemischt werden, können wir durch Berechnung der Gewichtung bestimmen, welcher die höchste Priorität hat

2 Regeln

2.1 Berechnen Sie zunächst, wie viele IDs sich im Selektor befinden, und der Selektor mit mehr IDs hat die höchste Priorität

2.2 Wenn die Anzahl der IDs gleich ist, schauen Sie sich die an Die Anzahl der Klassennamen hat die höchste Priorität.

2.3 Wenn die Anzahl der Klassennamen gleich ist, sehen Sie sich die Anzahl der Tag-Namen an. Diejenige mit den meisten Tag-Namen hat die höchste Priorität

2.4 Wenn die Anzahl der IDs gleich ist, die Anzahl der Klassennamen gleich ist und die Anzahl der Tag-Namen gleich ist, wird die Berechnung nicht fortgesetzt. Wer auch immer später schreibt wird jedem zuhören

Hinweis:

1). Nur der Selektor ist direkt ausgewählt Die Beschriftungen müssen berechnet werden, andernfalls hören sie auf jeden Fall auf den direkt ausgewählten Selektor Fall in diesem Artikel und mehr. Wie aufregend, achten Sie bitte auf andere verwandte Artikel auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Tipps zu HTML5, die leicht übersehen werden

Das obige ist der detaillierte Inhalt vonDrei Hauptfunktionen von CSS, die Sie kennen müssen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!