在表格的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 >背景为#CCC。

有人能告诉我如何使用nth-child伪类来完成吗？

- user2127251

Answer 1

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

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

- MarcinJuraszek

---

table tr td:nth-child(2) { background: #ccc; } 这段代码对我不起作用。 - user2127251

怎样才能只选中第二个子元素？当前代码选择了所有的 td 元素，而非只有第二个。 - alonblack

代码在fiddle中运行得非常好（只选择指定的子元素）。@alonblack，我建议你对比一下你的代码和fiddle中的代码。 - Chaya Cooper

Answer 2

根据最新的CSS规范，不可能做到这一点，没有所谓的“按内容查找”选择器（除了:empty选择器，它可以用于查找具有空内容的DOM）。

另一种实现方法是使用“按属性查找”选择器，但您需要对代码进行小更新，在所有具有$内容的<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>

- novalagung

Answer 3

table tr td:nth-child(n){
   background: #ffffff;
   padding: 2px;
}

n可以是任何子元素，例如：n=1,2,3,4....

- Ali Usman