使用 inline CSS style
在表格中使用颜色
<style>
.mytable td:nth-child(1) { font-weight: bold; }
.mytable tr:nth-child(1) td:nth-child(n+2):nth-child(-n+4) { background: red; }
.mytable tr:nth-child(2) td:nth-child(2) { background: deepskyblue; }
.mytable tr:nth-child(2) td:nth-child(3) { background: palegreen; }
.mytable tr:nth-child(2) td:nth-child(4) { background: orange; }
</style>
| | Column 1 | Column 2 | Column 3 |
| ----- | :------: | :------: | :------: |
| Row 1 | R1 C1 | R1 C2 | R1 C3 |
| Row 2 | R2 C1 | R2 C2 | R2 C3 |
{:.mytable}
这里在样式中定义了 class selector .mytable，并通过在某行下使用 {:.mytable} 来应用该 class。
显示效果
| Column 1 | Column 2 | Column 3 | |
|---|---|---|---|
| Row 1 | R1 C1 | R1 C2 | R1 C3 |
| Row 2 | R2 C1 | R2 C2 | R2 C3 |
解释
:nth-child(n+X) /* all children from the Xth position onward */
:nth-child(-n+x) /* all children up to the Xth position */
:nth-child(n+2):nth-child(-n+4) /* range 2-4 */