css - 在表 tr td 中使用 nth-child

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>带有“$”的 s，背景为#CCC所有<tr>s。

任何人都可以帮助我如何使用nth-child伪类来做到这一点吗？

Answer 1

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

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

Answer 2

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

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>