Classe ne s'appliquant pas à la colonne de table

Question

J'ai la table * column et class suivantes, et pourtant lorsque la table est rendue dans Firefox, la classe est manquante.

<td class="item-template-readmore"> 
    <a href='Detail.aspx?id=<%# Eval("id") %>'>Read More</a> 
</td> 

.item-template-readmore 
{ 
    color: Red; 
} 

Cependant, lorsque j'ai cette combinaison de colonne et de classe, la classe est présente dans le navigateur.

<td class="item-template-name"> 
    <%# Eval("Name") %> 
</td> 

.item-template-name 
{ 
    color: Red; 
} 

Logiquement, cela est incorrect. La seule différence que je peux voir est que la colonne 'operational' n'a pas d'éléments enfants (sauf pour le texte), et je sais que c'est le lapin de CSS, mais sûrement le style sur l'élément contenant ne devrait même pas être des éléments contenus?

• Tables, je sais, est-il pas mal :-)

Answer 1

Comme @meder implies, ce n'est pas que les cellules table sont au courant de leur contenu, c'est que le contenu sont conscients de leur propre existence. Les éléments a appliquent leurs propres styles, par conséquent, au lieu de styliser la cellule de table, vous devez mettre en forme le a:

a { couleur: rouge; }

En supposant que vous voulez la différenciation entre les différents états du a:

a:link, 
a:visited { 
/* for non-hovered/active states */ 
} 

a:hover, 
a:active, 
a:focus { 
/* for the more (inter-) active states */ 
} 

Vous pouvez également préfacer ces styles avec table et/ou d'augmenter la spécificité de la classe de la colonne:

table a:link, 
table a:visited, 
table .item-template-readmore a:link, 
table .item-template-readmore a:visited { 
/* styles */ 
} 

Vous pouvez également, si vous le souhaitez, utiliser inherit pour forcer les éléments a à hériter des propriétés de leur élément parent:

a { 
    color: inherit; 
    background-color: inherit; 
    font-family: inherit; 
    /* and so on... */ 
} 

Answer 2

Essayez .item-template-readmore a { color:red; }