在表 tr td 中使用 nth-child答案

【问题标题】：using nth-child in tables tr td在表 tr td 中使用 nth-child
【发布时间】：2017-04-21 11:54:34
【问题描述】：

<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>

这是我的代码，我想要在所有<tr>s 中带有“$”的<td>s 背景为#CCC。

谁能帮助我如何使用nth-child，伪类来做到这一点？

【问题讨论】：

标签： css css-selectors

【解决方案1】：

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

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

【讨论】：

table tr td:nth-child(2) { 背景：#ccc;这段代码对我不起作用
但它选择了所有的 td，而不仅仅是 2...？我怎样才能只选择第二个孩子？
小提琴中的代码就像一个魅力（只选择指定的孩子）。 @alonblack，我建议您根据小提琴中的代码仔细检查您的代码。

【解决方案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>

【讨论】：