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 7a4013e8fee6ceb30b8487e50ad2a24a kann vererbt werden

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

3. 8e99a69fbe029cd4e2b854e244eab143Spezialität in der Vererbung128dba7a3a77be0113eb0bea6ea0a5d0

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

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

Anwendungsszenarien:

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

Körper{} >>> im Körper festgelegt

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:

3. Priorität

<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

Wenn es sich um indirekte Auswahl handelt Wer näher am Zieletikett ist, wird es hören

2.2 Gleicher Selektor (Direktauswahl)

Wenn sie alle direkt ausgewählt sind und alle vom gleichen Typ Auswahlselektor sind, dann schreibt es derjenige, der es später schreibt wird es anhören

2.3 Verschiedene Selektoren (Direktauswahl)

Wenn sie alle direkt ausgewählt werden und nicht vom gleichen Selektortyp sind, wird der Selektor mit Priorität zur Kaskadierung verwendet:

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, 8e99a69fbe029cd4e2b854e244eab143 kann nicht für die indirekte Auswahl verwendet werden128dba7a3a77be0113eb0bea6ea0a5d0

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

Das Gewicht der Priorität

 <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

Mit anderen Worten, wenn die Prioritäten gleich sind, dann hört jeder, der später schreibt, jedem zu

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:

So laden Sie HTMLString in iOS webView

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!