Detaillierte Erläuterung der Anwendung der vier Zustände der Hyperconnection_HTML/Xhtml_Web-Seitenproduktion

Obwohl Sie glauben, dass die mögliche Ursache ein Browserproblem ist, ist es wahrscheinlicher, dass die Reihenfolge Ihrer Stildefinitionen falsch ist. Um sicherzustellen, dass Sie die Verbindungsstile in verschiedenen Zuständen sehen können, sollte die richtige Reihenfolge der Stile lauten:

“ Link – besucht – Hover – aktiv“ oder „LVHA“ (Abkürzung).

Kerninhalt:

Jeder Selektor hat eine „Spezifität“. Wenn zwei Selektoren auf dasselbe Element angewendet werden, gewinnt der Selektor mit der höheren Spezifität und hat Priorität. Zum Beispiel:

P.hithere {Farbe: grün;} /* Spezifität = 1,1 */P {Farbe: rot;} /* Spezifität = 1 */

Jeder Absatzinhalt mit class=hithere wird in Grün statt in Rot angezeigt. Beide Selektoren legen die Farbe fest, aber der Selektor mit der höheren Spezifität gewinnt.

Wie wirken sich Pseudoklassen auf die Spezifität aus? Sie haben genau den gleichen Gewichtungswert und die folgenden Stile haben den gleichen Spezifitätsgewichtungswert:

A:link {Farbe: Blau;} /* Spezifität = 1,1 */A:aktiv {Farbe: Rot;} /* Spezifität = 1,1 */A:hover {Farbe: Magenta;} /* Spezifität = 1,1 */A:visited {color: purple;} /* Spezifität = 1,1 */

Dies sind Stileinstellungen für Hyperlinks. In den meisten Fällen ist es notwendig, mehrere Stile gleichzeitig festzulegen. Beispielsweise kann ein nicht besuchter Hyperlink beim Bewegen der Maus und beim Klicken unterschiedliche Stile in den beiden Zuständen „Mausbewegen“ und „Mausaktivierung“ festlegen. Die oben genannten drei Regeln können alle auf Hyperlinks angewendet werden, und alle Selektoren haben die gleiche Spezifität, dann „gewinnt“ gemäß den Regeln der letzte Stil. Daher wird der „aktive“ Stil nie angezeigt, da er immer vom „Hover“-Stil überschrieben wird (d. h. „Hover“ hat Vorrang). Lassen Sie uns nun die Auswirkung des Mouseovers auf einen besuchten Hyperlink analysieren. Das Ergebnis ist immer lila :(, da sein „besuchter“ Stil immer Vorrang vor anderen Statusstilregeln hat (einschließlich „aktiv“ und „schweben“).

Aus diesem Grund empfiehlt CSS1 die Stilreihenfolge:

A:linkA:visitedA:hoverA:active

Tatsächlich kann die Reihenfolge der ersten beiden Stile umgekehrt werden, da ein Hyperlink nicht gleichzeitig den Status „unbesucht“ und „besucht“ haben kann. ( :link bedeutet „unbesucht“; ich weiß nicht, warum es nicht so definiert ist.)

CSS2 ermöglicht jetzt das Erscheinen von Pseudoklassen in der Form einer „verbundenen Gruppe“, zum Beispiel:

A:visited:hover {color: maroon;} /* specifity = 2,1 */A:link:hover {color: magenta;} /* specifity = 2,1 */A:hover:active {color : cyan;} /* Spezifität = 2,1 */

Sie haben die gleiche Spezifität, gelten aber für grundsätzlich unterschiedliche Tiere und stehen daher nicht in Konflikt. Sie können beispielsweise Schwebe-Aktiv-Kombinationen erhalten

Wie ist die „Spezifität“ dieses Artikels zu verstehen? Spezifität kann Zahlenfolgen verstehen, die nicht einfach miteinander verbunden sind: P.hithere {color: green;} /* specifity = 11 */P {color: red;} /* specifity = 1 */

Dies scheint eine einfache dezimalbasierte Operation zu sein. Der Dezimalalgorithmus kann jedoch nicht zur Berechnung der „Spezifität“ verwendet werden. Wenn Sie beispielsweise 15 Selektoren zusammen verwenden, sind ihre „Spezifitäts“-gewichteten Werte immer noch niedriger als die von einfachen Klassenselektoren. Beispiel:

.hello {Farbe: rot;} /* Spezifität = 10 */HTML BODY DIV UL LI OL LI UL LI OL LI UL LI OL LI (Farbe: grün;} /* Spezifität = 15 */

„10“ ist eigentlich eine „1“, gefolgt von „Null“, nicht „Zehn“. Wir können Hexadezimal verwenden, um die Besonderheiten der vorherigen Stilregeln zu beschreiben, wie folgt:

.hello {Farbe: Rot;} /* Spezifität = 10 */HTML BODY DIV UL LI OL LI UL LI OL LI UL LI OL LI (Farbe: Grün;} /* Spezifität = F */

Das einzige Problem besteht darin, dass Sie möglicherweise eine Spezifität von „17“ erhalten, wenn Sie der zweiten Stilregel zwei oder mehr Selektoren hinzufügen möchten, was erneut zu Verwirrung führt. Tatsächlich kann die Spezifität unendlich sein. Um weitere Verwirrung zu vermeiden, wird empfohlen, die Spezifitätswerte durch Kommas zu trennen.

Vorschlag des Webmasters: Üben Sie wiederholt die Berechnung des gewichteten Wertes der Spezifität. Die Einstellung des Website-CSS spiegelt Ihre Fähigkeit wider, die Seite zu steuern. Bei der dynamischen Website-Entwicklung ist auch der Status von CSS sehr wichtig. Lesen Sie mehr Informationen, üben Sie mehr, kommen Sie zu Script Home mehr! Wenn Ihnen diese Seite gefällt, machen Sie bitte Werbung dafür! Danke fürs Lesen.