CSS：设置字体粗细

Question

是否可以在不使用 !important 的情况下将字体设置为 normal？

http://jsfiddle.net/DvBes/

<table id="tasks">
    <tr><td>Name</td><td>SomeTask</td></tr>
    <tr><td>Time</td><td class="gray">08/11/2011</td></tr>
</table>



table#tasks td:first-child+td {
    font-weight:bold;
}

.gray {
    color: gray;
    font-weight: normal !important;
}

- johnny

Answer 1

你的第一条CSS规则比第二条更具体，因此如果不使用!important，它将覆盖第二个。

你可以通过将.gray更改为table#tasks td:first-child+td.gray来实现相同的效果，无需使用!important。

- Kokos

---

我用了这种方法，但我觉得它可以再简短一点。 - johnny

您也不需要在 table#tasks 中指定 table，因为页面上应该只有一个 ID 为 tasks 的元素。我相信这甚至可能会带来性能上的好处。 - derekerdmann

只是 #tasks td:first-child+td.gray 吗？在 CSS 中，是否有任何情况可以使用类似于 element#id 的选择器？我忘记了在哪里和为什么我使用了 table#tasks。 - johnny

不确定为什么规范将其作为示例，但这并不是必要的。正如 derekerdmann 所说，应该只有一个具有该ID的元素（这就是ID的目的，要唯一）。此外，不要使用那个疯狂的CSS行，而是使用<th>标签。即使它们在左侧而不是顶部，您行中的第一个单元格在语义上也符合标题单元格的条件，因此使用<th>是适当的。根据您的目标，然后可以使用td作为选择器来使文本加粗，而.gray则能像您最初预期的那样工作。 - Shauna

@Shauna 我可以在多行中使用 th 吗？就像这样 http://jsfiddle.net/DvBes/11/? - johnny

@johnny - 是的，这就是 th 的作用。请查看 WhatWG 文档中 4.9.2 节后面的示例 - http://www.whatwg.org/specs/web-apps/current-work/multipage/tabular-data.html#the-table-element 注意加粗的数字，两组都使用了 th。 - Shauna

Answer 2

以下代码可以实现该功能：

#tasks .gray {
    color: gray;
    font-weight: normal;
}

您需要学习一些选择器的特异性，这里有一篇很好的文章http://css-tricks.com/855-specifics-on-css-specificity/。

- Spadar Shut

---

问题明确指出不要使用 !important。 - andyb

哦，抱歉，在这里使用 !important 是不必要的，我只是忘记删除它了。 - Spadar Shut

@Spadar 在这种情况下，我不仅得到了灰色，还有粗体。 - johnny

很奇怪，因为#tasks .gray具有更高的特异性，可能有其他东西干扰了样式。尝试打开Firebug并检查元素以查看发生了什么。 - Spadar Shut

Answer 3

如果您更改了CSS：

.gray {
    color: gray;
    font-weight:normal;
}

到

table#tasks td:first-child+td.gray, .gray {
    color: gray;
    font-weight: normal;
}

- Joe

Answer 4

是的，让它更具特定性

table#tasks tr td.gray

- andyb

---

在.gray之前，您缺少了td。 - andyb