CSS 在表 tr td 中使用 nth-child
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15448679/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
using nth-child in tables tr td
提问by MarcinJuraszek
<table>
<tr>
<th> </th>
<td>$</td>
<td> </td>
</tr>
<tr>
<th> </th>
<td>$</td>
<td> </td>
</tr>
<tr>
<th> </th>
<td>$</td>
<td> </td>
</tr>
<tr>
<th> </th>
<td>$</td>
<td> </td>
</tr>
<tr>
<th> </th>
<td>$</td>
<td> </td>
</tr>
</table>
Here is my code, I want <td>s with "$" with a background of #CCCin all the <tr>s.
这是我的代码，我想要<td>带有“$”#CCC的<tr>s ，所有s的背景都是s。
Can any one help me how to do this using nth-child, pseudo classes?
任何人都可以帮助我如何使用nth-child伪类来做到这一点？
回答by MarcinJuraszek
table tr td:nth-child(2) {
background: #ccc;
}
Working example: http://jsfiddle.net/gqr3J/
工作示例：http: //jsfiddle.net/gqr3J/
回答by novalagung
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选择器查找属性，但你必须把一些标识上所有的<td>具有$内。示例：
在表 tr td 中使用 nth-child
html
html
<tr>
<td> </td>
<td data-rel='$'>$</td>
<td> </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>