代码之家  ›  专栏  ›  技术社区  ›  ProfK

类不应用于表列

css
  •  1
  • ProfK  · 技术社区  · 14 年前

    我有下面的table*列和类,但是当在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;
    }
    

    从逻辑上讲这是错误的。我能看到的唯一区别是“operational”列没有子元素(除了文本),我知道这是CSS的兔子洞,但是包含元素上的样式甚至不应该知道包含的元素吗?

    • 桌子,我知道,不是很邪恶吗
    2 回复  |  直到 14 年前
        1
  •  4
  •   Community CDub    8 年前

    作为 @meder implies ,不是 table 细胞知道它们的内容,内容是意识到它们自身的存在。这个 a 元素应用它们自己的样式,因此,与其设置表单元格的样式,还不如设置 :

    一个{ 颜色:红色; }

    假设您想要区分 :

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

    您也可以在这些样式前加上 桌子 和/或列的类以增加特异性:

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

    如果你愿意,你也可以 inherit 强迫 要从其父元素继承属性的元素:

    a {
      color: inherit;
      background-color: inherit;
      font-family: inherit;
      /* and so on... */
    }
    
        2
  •  2
  •   meder omuraliev    14 年前

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