不适用于表列的类

Question

我有下表*列和类，但是当在Firefox中呈现表时，该类缺失。

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

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

然而，当我有这个列和类的组合时，该类存在于浏览器中。

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

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

逻辑上这是错误的。我能看到的唯一区别是'操作'列没有子元素（文本除外），我知道这是CSS的兔子洞，但是包含元素的样式当然不应该知道包含的元素？

• 表，我知道，这不是邪恶的： - ）

Answer 1

作为@meder implies，并不是table单元格知道它们的内容，而是内容知道它们自己的存在。 a元素应用自己的样式，因此您应该为a设置样式而不是样式化表格单元格：

a { 红色; }

假设您希望区分a的各种状态：

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

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

您还可以使用table和/或列的类来为这些样式添加前缀，以提高特异性：

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

如果您愿意，也可以使用inherit强制a元素从其父元素继承属性：

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

Answer 2

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