覆盖单个项目的常规CSS样式？

Question

很抱歉，如果标题有点模糊。我不太确定如何说出这个问题。我目前有一种风格：

#exampleTable th {
background-color: #333;
}

如您所见，该样式适用于特定表的标题标记。我的问题是如何将此表背景颜色中的单个标题更改为其他颜色？属性不起作用，因为它被我的一般样式覆盖。我怎么能做到这一点？感谢。

Answer 1

如果您在内联样式中使用!important，它应该有效：

<th style="background-color: red !important">

Answer 2

CSS是否在外部文档（.css文件）中？如果是这样，内联样式将覆盖它。你可以做一些事情lJava Templating Classike：

<table class='someclass'>
    <thead>
        <tr>
            <th></th>
            <th style='background-color: red;'></th>
            ....

但是，我认为使用课程会更有效率。您只需要使您的类规则比通用规则更具体。例如

#exampleTable th {
background-color: #333;
}
#exampleTable th.myclass {background-color: #00f;}

现在，班级myclass中的任何一个都是红色的，而没有班级的任何一个将是深灰色。

Answer 3

如果您不关心与旧浏览器（尤其是IE）的兼容性，您可以使用 ：nth-​​child（）伪类

#exampleTable th:nth-child(3){color:green}

http://tinyurl.com/aogul8e

了解详情：http://css-tricks.com/useful-nth-child-recipies/

如果你想支持旧的浏览器，请按照Mike的建议，为你想要覆盖的每个TH添加一个类（或者使用jQuery来使用具有跨浏览器兼容性的nth-child）

使用“！important”应仅用于调试目的。

Answer 4

如果您只使用足够高specificity的组合选择器，则使用属性选择器可以正常工作。例如，对单元格使用<th class=foo>...</th>，使用

等CSS规则

#exampleTable th.foo {
  background-color: blue;
}

这里选择器还有一个成分，类选择器.foo，而不是你的一般规则。这确保了更高的特异性。