CSS même style pour un: lien a: visité a: hover a: actif, vraiment à écrire 4 fois

Ho Ho,

Lorsque vous travaillez avec des feuilles de style CSS. Si le style est le même pour a:link a:visited a:hover a:active-t-on vraiment écrire pour le moment. Travailler avec un lien personnalisé.

.DT_compare a:link {
    font-family:"Lucida Grande", Arial, sans-serif;
    font-size:11px;
    line-height:14px;
    font-weight:normal;
    font-style:normal;
    color:#EEE;
    text-align:center;
}

Tous les raccourcis?

Merveilleux

source d'informationauteur Robin Knight

  1. 14

    Oublier les pseudo-classes, et de ne choisir que a:

    .DT_compare a {
    font-family:"Lucida Grande", Arial, sans-serif;
    font-size:11px;
    line-height:14px;
    font-weight:normal;
    font-style:normal;
    color:#EEE;
    text-align:center;
}

    Ce n'est pas très précis sélecteur, si nécessaire, vous pouvez trouver une autre façon de l'augmenter si elle annule votre a:hover et a:active sélecteurs, ou aller avec whoughton réponse à la place et il suffit de spécifier tous les quatre.

    Puis encore une fois, si votre principal lien hypertexte styles s'appliquent à a:hover et a:active sans rien devant eux, aussi longtemps que vous placez votre .DT_compare a règle dessous d'eux, il devrait fonctionner correctement.

  2. 11

    Je ne pense pas que vous pouvez faire tout plus courte que:

    .DT_compare a:link,
.DT_compare a:visited,
.DT_compare a:hover,
.DT_compare a:active, {
    font-family:"Lucida Grande", Arial, sans-serif;font-size:11px;line-height:14px;font-weight:normal;font-style:normal;color:#EEE;text-align:center; }
  3. 2

    il suffit de laisser la :link hors d'affecter tous les états à la fois.

  4. 0

    Moins peut aider ici par "mixin', par exemple:

    .a {
  text-decoration: none;
  color: black;
}

a:link { .a; }
a:visited { .a; }

    Je ne serais pas surpris s'il y avait une plus belle façon, mais c'est le meilleur que je connaisse. moins est sérieusement bien c'est en gros le CSS, mais comment un programmeur aurait imaginé. Vous n'aurez jamais à vous répétez à nouveau...

  5. 0
    .DT_compare a[href]{ ... }

    est agréable car vous pouvez faufiler dans un supplément de la spécificité. (sélecteur d'attributs == sélecteur de classe, tout de même).

  6. -3
    .DT_compare a:link, a:visited {
font-family:"Lucida Grande", Arial, sans-serif;
font-size:11px;
line-height:14px;
font-weight:normal;
font-style:normal;
color:#EEE;
text-align:center;
}

.DT_compare a:hover, a:active {
font-family:"Lucida Grande", Arial, sans-serif;
font-size:11px;
line-height:14px;
font-weight:normal;
font-style:normal;
color:#EEE;
text-align:center;
}