如何为表中的每个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。

你的选择器错了。 {/ 1}}应该在选择器的末尾使用。

:before

首先选择第一个子元素，然后在其上使用.help-block .css-context-explorer-orientation-widget td:nth-child(1):before { 。

Answer 2

您需要先在nth-child伪元素之前使用伪类::before。

您的代码具有Select the first before pseudo-element of the parent的逻辑伪元素是伪造的而不是DOM的一部分，所以它们不是使用nth-child计算的。

以下代码生成逻辑Select the before pseudo-element of td which is first child of the parent

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

Answer 3

只需申请：nth-​​child before：before

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