css - 覆盖单个项目的一般 CSS 样式？

Question

对不起，如果标题有点模糊。我不太确定如何措辞这个问题。我目前有一种风格：

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

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

score 4 · Accepted Answer

If you use !important in your inline style, it should work:

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

score 0 · Accepted Answer

如果您只使用具有足够高特异性的组合选择器，则使用属性选择器可以正常工作。例如，<th class=foo>...</th>用于单元格和 CSS 规则，如

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

在这里，选择器.foo比您的一般规则多了一种成分，即类选择器。这确保了更高的特异性。

score 0 · Accepted Answer

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

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

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

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

score 0 · Accepted Answer

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;}

现在任何有类的 thmyclass都将是红色的，而没有类的 th 将是深灰色的。

4 回答 4