Ich habe den Stil des Hyperlinks mit CSS definiert, aber Hover (Maus -Hover) funktioniert beim Surfen nicht. Warum passiert das? Ist es ein Browserproblem?
Antwort:Obwohl Sie der Meinung sind, dass der Grund ein Browserproblem ist, ist es wahrscheinlicher, dass Ihre Stildefinition eine falsche Reihenfolge ist. Um sicherzustellen, dass Sie die Verbindungsstile in verschiedenen Zuständen sehen können, sollte die richtige Reihenfolge der Stil sein:
Link - besucht - Hover - Active oder LVHA (Abkürzung).
Kerninhalt:
Jeder Selektor hat eine Spezifität. Wenn zwei Selektoren auf dasselbe Element angewendet werden, gewinnen Selektoren mit höherer Spezifität und haben Priorität. Zum Beispiel:
P.Hithere {Farbe: grün;} / * Spezifität = 1,1 * /
P {Farbe: rot;} / * Spezifität = 1 * /
Jeder Absatzinhalt mit class class = hithere wird grün anstelle von rot angezeigt. Beide Selektoren haben einen Farbsatz, aber Selektoren mit höherer Spezifität gewinnen.
Wie wirken sich Pseudoklassen auf die Spezifität aus? Sie haben genau den gleichen Gewichtungswert und die folgenden Stile haben den gleichen spezifischen Gewichtungswert:
A: Link {Farbe: blau;} / * Spezifität = 1,1 * / /
A: Active {Farbe: rot;} / * Spezifität = 1,1 * / /
A: Hover {Farbe: Magenta;} / * Spezifität = 1,1 * /
A: besucht {Farbe: lila;} / * Spezifität = 1,1 * /
Dies sind Stileinstellungen für Hyperlinks. In den meisten Fällen müssen mehrere dieser Stile gleichzeitig festgelegt werden. Beispielsweise kann ein nicht besuchter Hyperlink in verschiedenen Stilen sowohl in der Maus -Schwebe- als auch in der Mausaktivierung eingestellt werden, wenn sie schweben und klicken. Da die oben genannten drei Regeln auf Hyperlinks angewendet werden können und alle Selektoren die gleiche Spezifität haben, gewinnt gemäß den Regeln der letzte Stil. Der aktive Stil wird also niemals angezeigt, da er immer vom Schwebstil bedeckt ist (d. H. Der Schwebe wird bevorzugt). Lassen Sie uns nun analysieren, was die Auswirkung des besuchten Hyperlink -Mausovers ist, und das Ergebnis ist immer lila :( Weil sein besuchter Stil immer Vorrang vor anderen Regeln für staatliche Stile hat (einschließlich Aktiv und Schwebe).
Aus diesem Grund empfiehlt CSS1 Stilreihenfolge:
A: Link
A: Besucht
A: Schwebe
A: aktiv
Tatsächlich kann die Reihenfolge der ersten beiden Stile ausgetauscht werden, da ein Hyperlink nicht gleichzeitig mit ungerückten und abgerufenen Zuständen existieren kann. (: Link bedeutet nicht besucht; ich weiß nicht, warum es nicht so definiert ist.)
Mit CSS2 können Pseudoklassen nun in Gewerkschaftsgruppen erscheinen, zum Beispiel in Gewerkschaftsgruppen:
A: Besucht: Hover {Farbe: Maroon;} / * Spezifität = 2,1 * /
A: Link: Hover {Farbe: Magenta;} / * Spezifität = 2,1 * /
A: Hover: Active {Farbe: Cyan;} / * Spezifität = 2,1 * /
Sie haben die gleiche Spezifität, aber sie gelten für grundsätzlich unterschiedliche Bestien und konflikt nicht. Sie können beispielsweise schwebeaktive Kombinationen erhalten.
Wie kann man die Spezifität verstehen, die in diesem Artikel verbunden ist? Die Spezifität kann als eine Zahlenzeichenfolge verstanden werden, die nicht einfach miteinander verbunden ist, ein Beispiel oben:
P.Hithere {Farbe: grün;} / * Spezifität = 11 * /
P {Farbe: rot;} / * Spezifität = 1 * /
Dies scheint eine einfache Operation zu sein, die auf der Dezimalzahl basiert. Die Berechnung der Spezifität kann jedoch keine Dezimalalgorithmen verwenden. Wenn Sie beispielsweise 15 Selektoren zusammen verwenden, sind ihre spezifischen gewichteten Werte immer noch niedriger als einfache Klassenauswahl. Zum Beispiel:
.hello {color: rot;} / * Spezifität = 10 * /
html Körper divii li ul li ul li ul li li ol li (Farbe: grün;} / * Spezifität = 15 * /
10 ist tatsächlich eine Spezifität, die 1 und dann Null folgt, nicht zehn. Wir können Hexadezimal verwenden, um die vorherigen Stilregeln wie folgt zu beschreiben:
.hello {color: rot;} / * Spezifität = 10 * /
html Körper diviL li ul li ul li ul li li ol li (Farbe: grün;} / * Spezifität = f * /
Das einzige Problem ist, dass Sie, wenn Sie zwei oder mehr Selektoren zur zweiten Stilregel hinzufügen möchten, möglicherweise eine bestimmte 17 erhalten, die erneut verwirrt wird. Tatsächlich kann die Spezifität unendlich sein. Um mehr Verwirrung zu vermeiden, wird empfohlen, Kommas zu verwenden, um den spezifischen Wert zu trennen.
Webmaster schlägt vor: Wiederholen Sie die Berechnung des gewichteten Wertes der Spezifität. Die Einstellung der Website CSS spiegelt Ihre Fähigkeit wider, die Seite zu steuern. In der dynamischen Website -Entwicklung ist auch der Status von CSS sehr wichtig. Lesen Sie mehr Informationen, üben Sie mehr und entwerfen Sie mehr Webseiten! Wenn Sie diese Website mögen, bewerben Sie sie in Ihrem Namen! Danke fürs Lesen.