|
fragen:
Ich habe den Hyperlink mit CSS formatiert, aber er funktioniert beim Hovern nicht. Warum passiert das? Ist es ein Browserproblem?
Antwort:
Obwohl Sie denken, dass es sich möglicherweise um ein Browserproblem handelt, 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 Stilreihenfolge sein:
„link-visited-hover-active“ oder „LVHA“ (Abkürzung).
Kerninhalte:
Jeder Selektor hat eine „Spezifität“, und wenn zwei Selektoren auf dasselbe Element angewendet werden, gewinnt der Selektor mit der höheren Spezifität und hat Vorrang. Zum Beispiel:
P.hithere {Farbe: grün;} /* Spezifität = 1,1 */
P {Farbe: rot;} /* Spezifität = 1 */
Jeder Absatzinhalt mit festgelegter Klasse „class=hithere“ wird grün statt rot angezeigt. Beide Selektoren legen die Farbe fest, aber der Selektor mit der höheren Spezifität gewinnt.
Welchen Einfluss haben Pseudoklassen auf die Spezifität? Sie haben genau dieselben Gewichtungswerte und die folgenden Stile haben dieselben Spezifitätsgewichtungswerte:
A:link {color: blue;} /* Spezifität = 1,1 */
A:aktiv {Farbe: rot;} /* Spezifität = 1,1 */
A:hover {color: magenta;} /* Spezifität = 1,1 */
A:besucht {Farbe: lila;} /* Spezifität = 1,1 */
Dies sind die Stileinstellungen für Hyperlinks. In den meisten Fällen müssen Sie mehrere dieser Stile gleichzeitig festlegen. Beispielsweise kann ein nicht besuchter Hyperlink unterschiedliche Stile für „Mouseover“ und „Mausaktiviert“ haben, wenn die Maus darüber bewegt und angeklickt wird. Da die oben genannten drei Regeln alle auf Hyperlinks angewendet werden können und alle Selektoren dieselbe Spezifität haben, „gewinnt“ gemäß den Regeln der letzte Stil. Der „aktive“ Stil wird also nie angezeigt, da er immer durch den „Hover“-Stil überschrieben wird (d. h. „Hover“ hat Vorrang). Lassen Sie uns nun analysieren, was passiert, wenn Sie mit der Maus über einen besuchten Hyperlink fahren. Das Ergebnis ist immer lila :(, da der Stil „besucht“ immer Vorrang vor anderen Statusstilregeln (einschließlich „aktiv“ und „Hover“) hat.
Aus diesem Grund empfiehlt CSS1 die folgende Reihenfolge der Stile:
Ein: Link
A: besucht
A:schweben
A:aktiv
Tatsächlich kann die Reihenfolge der ersten beiden Stile vertauscht werden, da ein Hyperlink nicht gleichzeitig im Status „nicht besucht“ und „besucht“ vorhanden sein kann. ( :link bedeutet „nicht besucht“; ich weiß nicht, warum es nicht so definiert ist.)
CSS2 erlaubt jetzt das Auftreten von Pseudoklassen in „Gruppen“, zum Beispiel:
A:besucht:hover {Farbe: kastanienbraun;} /* Spezifität = 2,1 */
A:link:hover {color: magenta;} /* Spezifität = 2,1 */
A:hover:active {color: cyan;} /* Spezifität = 2,1 */
Sie haben die gleiche Spezifität, gelten aber für grundsätzlich unterschiedliche Lebewesen und stehen daher nicht im Konflikt. Sie können beispielsweise schwebeaktive Kombinationen erhalten.
Wie verstehen Sie die „Spezifität“, die dieser Artikel mit sich bringt? Spezifität kann Zahlenfolgen verstehen, die nicht einfach aneinandergereiht sind. Ein Beispiel aus dem obigen:
P.hithere {Farbe: grün;} /* Spezifität = 11 */
P {Farbe: rot;} /* Spezifität = 1 */
Dies scheint eine einfache, auf Dezimalzahlen basierende Operation zu sein. Die Berechnung der „Spezifität“ kann jedoch nicht den Dezimalargorithmus verwenden. Wenn Sie beispielsweise 15 Selektoren zusammen verwenden, ist ihr Gewichtswert für die „Spezifität“ immer noch niedriger als der eines einfachen Klassenselektors. Beispiel:
.hallo {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 einer „Null“, nicht eine „Zehn“. Wir können die Spezifität der vorherigen Stilregel hexadezimal beschreiben, wie folgt:
.hallo {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, wenn Sie der zweiten Stilregel zwei oder mehr Selektoren hinzufügen möchten, am Ende möglicherweise eine Spezifität von „17“ erhalten, was wiederum verwirrend wäre. Tatsächlich kann die Spezifität unendlich sein. Um weitere Verwirrung zu vermeiden, wird daher empfohlen, die Spezifitätswerte durch Kommas zu trennen.
Vorschlag des Webmasters : Üben Sie wiederholt, den gewichteten Wert der Spezifität zu berechnen. Die CSS-Einstellungen der Website spiegeln Ihre Fähigkeit wider, die Seite zu steuern. Bei der Entwicklung dynamischer Websites ist der Status von CSS ebenfalls sehr wichtig. Lesen Sie mehr Materialien, üben Sie mehr und besuchen Sie 123WORDPRESS.COM häufiger! Wenn Ihnen diese Site gefällt, machen Sie bitte Werbung dafür! Vielen Dank fürs Lesen
|
