我有一张桌子,我想让第一行有不同的背景颜色,例如蓝色。我使用表tr:first-child但它不起作用。你能帮助我吗?感谢。
<table>
<tr><td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr><td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr><td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>
答案 0 :(得分:0)
您可以使用此代码段。
table tr:first-child td {
background: blue;
}
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>
希望这会有所帮助:)
答案 1 :(得分:0)
您可以使用tr:first-of-type
。检查下面的更新代码段。
table tr:first-of-type td {
background: blue;
}
<table>
<tr><td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr><td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr><td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>
答案 2 :(得分:0)
你可以用这个:
table tr:first-child {
background: blue;
}
或者您可以在第一个tr
.bg-blue {
background:blue;
}
<table>
<tr class="bg-blue">
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
答案 3 :(得分:0)
正如您所说first-child
无法正常工作,如果有任何属性覆盖您的first-child
属性,我建议您检查它的父属性。基本上,它应该以这种方式工作。此外,我想知道您实际看到哪个浏览器问题。
试试这个:
table tr:first-child {
background:blue;
color:white;
}
<table>
<tr><td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr><td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr><td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>