如何在表格中格式化特殊的TD?

时间:2018-12-08 18:14:05

标签: html css html-table css-selectors

我这里有两个表,它们既没有类,也没有ID,也不能编辑。

但是我可以编辑它们的CSS。

如何在CSS中格式化第二个表的三个TD(内容为“ xxx,yyy,zzz”)。
嵌套“ nth-child”或类似的东西是否有帮助?
我已经尝试了一些方法,但是它总是会影响两个表。但这只会影响第二张表。

 <h4>sdkfjsdhgfksd</h4>
<table>
  <tr>
    <td>This</td>
    <td>Little</td>
    <td>Piggy</td>
    <td>Went</td>
    <td>To</td>
    <td>Market</td>
  </tr>
  <tr>
    <td>1</td>
    <td>22</td>
    <td>333</td>
    <td>4444</td>
    <td>55555</td>
    <td>666666</td>
  </tr>
</table>
<h4>tzutututzuutzu</h4>
<table>
  <tr>
    <td>This</td>
    <td>Little</td>
    <td>Piggy</td>
    <td>Went</td>
    <td>To</td>
    <td>Market</td>
  </tr>
  <tr>
    <td>1</td>
    <td>22</td>
    <td>xxx</td>
    <td>yyy</td>
    <td>zzz</td>
    <td>666666</td>
  </tr>
</table>

1 个答案:

答案 0 :(得分:1)

table:nth-of-type(2) /* select second table */
tr:nth-of-type(2) /* select second row of the table */
td:nth-child(3), /* select third child of the row */
table:nth-of-type(2) tr:nth-of-type(2) td:nth-child(4),
table:nth-of-type(2) tr:nth-of-type(2) td:nth-child(5) {
  background-color: red;
}
<h4>sdkfjsdhgfksd</h4>
<table>
  <tr>
    <td>This</td>
    <td>Little</td>
    <td>Piggy</td>
    <td>Went</td>
    <td>To</td>
    <td>Market</td>
  </tr>
  <tr>
    <td>1</td>
    <td>22</td>
    <td>333</td>
    <td>4444</td>
    <td>55555</td>
    <td>666666</td>
  </tr>
</table>
<h4>tzutututzuutzu</h4>
<table>
  <tr>
    <td>This</td>
    <td>Little</td>
    <td>Piggy</td>
    <td>Went</td>
    <td>To</td>
    <td>Market</td>
  </tr>
  <tr>
    <td>1</td>
    <td>22</td>
    <td>xxx</td>
    <td>yyy</td>
    <td>zzz</td>
    <td>666666</td>
  </tr>
</table>