Utilisation des classes CSS

Question

<td class="blue"> 
    <a href="lnk1.aspx">Hi1</a> 
    <a href="lnk2.aspx">Hi2</a> 
    <a href="lnk3.aspx">Hi3</a> 
    <div>Not Blue</div> 
</td> 

Je souhaite que la classe de l'étiquette ("blue") mette Hi1, Hi2 et Hi3 en bleu.

Alors, quel devrait être le chef de cette classe?

???? 
{ 
    color:blue; 
} 

Answer 1

l'aide d'un sélecteur descendant :

td.blue a { 
    color: blue; 
} 

Ou si vous voulez seulement pour les enfants immédiats, un sélecteur d'enfant :

td.blue > a { 
    color: blue; 
} 

Documents de référence:

• Selectors pris en charge par la plupart des navigateurs: CSS 2.1
• sélecteurs plus récents pris en charge par certains navigateurs et par diverses bibliothèques JavaScript (pour interagir avec les DOM): CSS3 Selectors

Answer 2

essayer.

td.blue a { 
    color: #0000FF; 
} 

Ceci définit toutes les balises qui se trouvent dans une balise td avec une classe de bleu.

Answer 3

Utilisez les éléments suivants. Cela signifie que tous les éléments a dans un élément td portant le nom de classe blue doivent être affichés en bleu.

td.blue a { 
    color:blue; 
} 

Cependant, il faut noter que sémantiquement il est imprudent de donner à vos classes CSS noms spécifiques de style (comme « bleu » ou « gras » ou « centre ») - si plus tard décidé de changer la couleur en rouge, vous devrez changer toutes les références à la classe blue en red (peut-être beaucoup de travail) ou plutôt être laissé avec des noms de classe vraiment confus qui n'ont pas de sens.

Essayez de nommer la classe après ce que les éléments en question signifient. Donc, dans ce cas, il pourrait être td.links par exemple.

Answer 4

Le sélecteur CSS dont vous avez besoin référencerait à la fois la classe blue et les étiquettes a situées en dessous.

.blue a { 
    color:blue; 
} 

Notez qu'il existe une autre syntaxe que vous pouvez également envisager:

.blue>a { 
    color:blue; 
} 

note la > entre .blue et a dans cet exemple. Les deux exemples fonctionneront pour votre code HTML donné, mais cette version est plus spécifique que la première, car elle affecte uniquement les tags <a> qui sont les enfants immédiats de blue. En d'autres termes, si vous aviez une balise <a> à l'intérieur du <div>, la première version l'affecterait, alors que cette version ne l'aurait pas. L'inconvénient est que IE6 ne supporte pas le sélecteur >, donc si vous devez supporter les utilisateurs IE6, vous devez utiliser la première version.Heureusement, les utilisateurs d'IE6 sont de moins en moins nombreux, mais il en existe encore quelques-uns.

Une autre chose: je vous conseille également d'éviter d'utiliser des noms de classe qui se réfèrent à la couleur réelle. Il est généralement préférable de l'appeler menulink, ou quelque chose comme ça.

La raison de cela? Imaginez à l'avenir que vous voulez changer un peu votre site, rafraîchissez-le pour une nouvelle version. Peut-être que de nouvelles couleurs d'entreprise après un rebranding exersise. Peu importe. Vous pouvez le faire sans changer du tout votre code HTML; juste une mise à jour CSS:

.blue a { 
    color:red; 
} 

... mais maintenant votre CSS n'a pas de sens. Si vous l'aviez appelé menulink, vous saurez toujours à quoi correspond cette classe, même si les choses changent avec le temps.