CSS! Haben Sie dieselben Eigenschaften für jeden Link Zustand wiederholen müssen? (Link, besuchte, schweben ... etc)?

StackOverflow https://stackoverflow.com/questions/1616034

  •  06-07-2019
  •  | 
  •  

Frage

Ist es notwendig oder schlechte Praxis Eigenschaften zu wiederholen, die nicht in jedem Verbindungstyp ändern? Wie folgt aus:

a:link {display: block; width: 50px;}
a:visited {display: block; width: 50px; color: #000;}
a:hover {display: block; width: 50px; color: #FFF}
a:active {display: block; width: 50px; color: #FFF}

Braucht Anzeigeblock in jedem sein? Oder ist das eine schlechte Praxis? Sie können aber auch Kettenglied Staaten? Wie folgt aus:

a:hover, a:active {display: block; width: 50px; color: #FFF}

Wenn Sie darüber hinaus einen zusätzlichen id / Klasse auf die Links haben, sollten sie die Standardstile zuerst, dann ändern für die spezifische id / Klasse erben? Wie folgt aus:

a:link {display: block; width: 50px; color: #000;}
....(etc)
a.menu:link {color: #FFF;}
....(etc)

Würde der .menu Link bekommt Anzeige und Breite von einem: Link und dann einfach die Farbe ändern

Vielen Dank für jede Hilfe Clearing all up!

War es hilfreich?

Lösung

Sie können Kettenglied Staaten.

: link und: visited sind die grundlegenden Definitionen für Links. Erklärungen zu ihnen auf jedem Link auf der Seite sein werden, selbst wenn ein Link-Klassen oder die ID hat.

sagte, dass: schweben und: Block, wenn Sie es auf erklärt: aktiv nicht Anzeige benötigt Link und:. Besuchen

Andere Tipps

keine Notwendigkeit, die Eigenschaften zu wiederholen, nicht sicher, ob es „schlechte Praxis“ per se ist, aber es ist definitiv etwas, das Sie optimieren können.

Sie können einstellen, einen {display: block; Breite:.. 50px} und dies wird alle Staaten decken (es sei denn, man anders an anderer Stelle gesetzt Und ja, auch die Staaten an die Kette der Lage sein sollte

Und du bist genau richtig, werden sie den Stil Variablen Vorrang nimmt den Elementtyp, aber id / Klassennamen zugewiesen erben, wenn sie gesetzt sind.

Ben Antwort Folgende:

a{ display:block; width: 50px }
a:hover, a:active{ color: #fff; }
a:visited{color: #000}
Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top