Question

<table>
  <tr>
    <th>&nbsp;</th>
    <td>$</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <th>&nbsp;</th>
    <td>$</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <th>&nbsp;</th>
    <td>$</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <th>&nbsp;</th>
    <td>$</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <th>&nbsp;</th>
    <td>$</td>
    <td>&nbsp;</td>
  </tr>
</table>

以下是我的代码，我希望<td>的所有#CCC中的<tr>背景为nth-child。

任何人都可以使用{{1}}伪类帮助我如何做到这一点吗？

Answer 1

table tr td:nth-child(2) {
    background: #ccc;
}

工作示例：http://jsfiddle.net/gqr3J/

Answer 2

当前的css版本仍然不支持内容选择器查找。但是有一种方法，通过使用css选择器按属性查找，但你必须在所有<td>内置$的标识符。例： using nth-child in tables tr td

HTML

<tr>
    <td>&nbsp;</td>
    <td data-rel='$'>$</td>
    <td>&nbsp;</td>
</tr>

CSS

table tr td[data-rel='$'] {
    background-color: #333;
    color: white;
}

请尝试这些例子。

table tr td[data-content='$'] {
    background-color: #333;
    color: white;
}

<table border="1">
    <tr>
        <td>A</td>
        <td data-content='$'>$</td>
        <td>B</td>
        <td data-content='$'>$</td>
        <td>C</td>
        <td data-content='$'>$</td>
        <td>D</td>
    </tr>
</table>

在表tr td中使用nth-child

2 个答案: