html - 如何给表格中的每个td赋予不同的内容

Question

我正在努力为每个 <td> 提供不同的内容(在我的例子中是图标)使用 nth-chid()方法。

如果我添加这个 CSS 规则，我会在每个 <td> 上看到一种图标:

.help-block .css-context-explorer-orientation-widget td:before {
    font-family: icons;
    content: "\e04f";
    position: absolute;
}

在这个阶段，我想覆盖上面的规则，但我没有看到任何变化，所有图标都是一样的。

.help-block .css-context-explorer-orientation-widget td:before:nth-child(1) {
    font-family: icons;
    content: "\e04e"!important;
}

如果我给出 !important规则，不应该覆盖上面的规则吗？

PS:当我到达第二行时如何覆盖规则？

Answer 1

这里的问题不在于important。

您的选择器有误。 :before 应该用在选择器的末尾。

.help-block .css-context-explorer-orientation-widget td:nth-child(1):before {

首先选择第一个子元素，然后在其上使用before。