在表tr td中使用nth-child

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

Here is my code, I want <td>s with "$" with a background of #CCC in all the <tr>s.

这是我的代码，我希望在所有中使用带有#CCC背景的“$” s。

Can any one help me how to do this using nth-child, pseudo classes?

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

2 个解决方案

#1

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

Working example: http://jsfiddle.net/gqr3J/

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

#2

Current css version still doesn't support selector find by content. But there is a way, by using css selector find by attribute, but you have to put some identifier on all of the <td> that have $ inside. Example: using nth-child in tables tr td

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

html

HTML

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

css

CSS

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

Please try these example.

请试试这些例子。

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>

#1

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