【问题标题】:How format a special TD in a Table?如何在表格中格式化特殊的 TD?
【发布时间】:2019-05-10 03:54:38
【问题描述】:

我这里有两个表,既没有类也没有 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>

【问题讨论】:

  • table:nth-of-type(2) td:nth-child(3)

标签: html css html-table css-selectors


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

【讨论】:

  • 是的,这个作品完美。也是缩短版: table:nth-of-type(2) tr:nth-of-type(2) td:nth-child(n+3):nth-child(-n+5) {background-color:红色;} :-)
猜你喜欢
  • 1970-01-01
  • 2012-06-11
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2023-01-13
  • 1970-01-01
  • 1970-01-01
  • 2016-02-17
相关资源
最近更新 更多