Entfernen Sie ALLE Stile / Formatierungen aus Hyperlinks

157

Ich erstelle ein Navigationsmenü mit Wörtern mit verschiedenen Farben ( hrefLinks). Ich möchte, dass sich die Farbe in keinem Zustand ändert (schweben, besucht usw.).

Ich weiß, wie man die Farben für die verschiedenen Zustände einstellt, aber ich möchte den Code kennen, um die Textfarbe (und jedes andere Styling / Format) so zu belassen, wie sie ist.

Irgendwelche Vorschläge?

html css href

— SiteHopper
quelle

247

Sie können einfach einen Stil für Links definieren, was würde außer Kraft setzen a:hover, a:visitedetc .:

a {
  color: blue;
  text-decoration: none; /* no underline */
}

Sie können den inheritWert auch verwenden , wenn Sie stattdessen Attribute aus übergeordneten Stilen verwenden möchten:

body {
  color: blue;
}
a {
  color: inherit; /* blue colors for links too */
  text-decoration: inherit; /* no underline */
}

— Frxstrem
quelle

4

Der wichtige Teil ist das inheritSchlüsselwort. Es hat leider keine 100% ige Unterstützung.

— David

2

initialist auch hilfreich, wenn Sie CSS auf den Standardstil zurücksetzen möchten. Dies ist hier gut erklärt Link

— SiteHopper

Vielen Dank für inherit!

— Parsecer

@ David, steht es noch? Funktioniert inheritnicht nur in alten Browsern und im Internet Explorer oder gibt es auch in gängigen Browsern (Chrome, Firefox) Schwierigkeiten?

— Parsecer

1

Überprüfen Sie auch nicht eingestellt . >> Das nicht gesetzte CSS-Schlüsselwort setzt eine Eigenschaft auf ihren geerbten Wert zurück, wenn sie von ihrem übergeordneten Wert erbt, und auf ihren Anfangswert, wenn nicht. Mit anderen Worten, es verhält sich im ersten Fall wie das geerbte Schlüsselwort und im zweiten Fall wie das ursprüngliche Schlüsselwort.

— JackMorrissey

4

Wie Chris vor mir sagte, sollte nur ein aüberschreiben. Beispielsweise:

a { color:red; }
a:hover { color:blue; }
.nav a { color:green; }

In diesem Fall die .nav a wäre das IMMER grün, der Schwebeflug würde nicht darauf zutreffen.

Wenn es eine andere Regel gibt, die sich darauf auswirkt, KÖNNTEN Sie sie verwenden !important, sollten dies aber nicht. Es ist eine schlechte Angewohnheit, sich darauf einzulassen.

.nav a { color:green !important; } /*I'm a bad person and shouldn't use !important */

Dann ist es immer grün, unabhängig von anderen Regeln.

— SpoonNZ
quelle

Das hat er nicht gefragt. Lesen Sie die Frage erneut. Er weiß das schon.

— david

@ David Ich habe noch einmal gelesen, ziemlich sicher, dass er das gefragt hat. Mit diesem Code kann er einen Stil festlegen, für aden Änderungen an :hover(oder :visitedusw.) verhindert werden. Wie wäre es, anstatt ein Schwanz zu sein und alle drei Antworten zu verwerfen, schlagen Sie eine tatsächliche Lösung vor?

— SpoonNZ

Danke für die Hilfe. Aber was ist, wenn der Link so ist? 2 Wörter in 2 Farben, aber es ist nur 1 Link: einzigartige (in Pink) Verkäufe (in Schwarz) Und sie sollten diese Farbe in jedem Zustand behalten. Ich habe es auf diese Weise inline codiert ... <a href="#" style="text-decoration: none" target="_blank"> <span style = "Schriftfamilie: Arial; Schriftgröße: 13px; Farbe: # e91974; Schriftgröße: leichter; "> einzigartig </ span> <span style =" Schriftfamilie: Arial; Schriftgröße: 13px; Farbe: # 020202; Schriftgröße: leichter; "> Umsatz </ span > </a> Aber es muss einen Reiniger geben. (dort wo viele Links wie dieser im Code sind) Irgendwelche Vorschläge?

— SiteHopper

1

Sie können einfach einen aSelektor in Ihrem Stylesheet verwenden, um alle Zustände eines Ankers / Hyperlinks zu definieren. Beispielsweise:

a {
    color: blue;
}

Würde alle Linkstile überschreiben und alle Zustände blau färben.

— Chris
quelle

Das hat er nicht gefragt. Lesen Sie die Frage erneut. Er weiß das schon.

— David

-1

Wenn Sie a.redLink{color:red;}dann angeben a.redLink:hover{color:red;} , dass der Hover beibehalten und solche hinzugefügt werden sollen, wird sichergestellt, dass keine anderen Hover-Zustände die Farbe Ihrer Links ändern

— Danferth
quelle