问题描述
我正在尝试设置表格样式。我希望最后一行的第一个元素具有背景色蓝色,而最后一个元素具有背景色红色。但是不知何故,我只得到最后一个红色,为什么?
这是CSS代码
table tr {
text-align: center;
}
table th:first-child {
text-align: left;
}
table td:first-child {
text-align: left;
}
tr:last-child>td:first-child {
border-radius: 0 0 0 10px;
background-color: blue;
}
tr:last-child>td:last-child {
border-radius: 0 0 10px 0;
background-color: red;
}
<table>
<tr>
<th>Hello</th>
<th>Hello1</th>
<th>Hello2</th>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>D</td>
<td>E</td>
<td>F</td>
</tr>
<tr>
<td>G</td>
<td>H</td>
<td>I</td>
</tr>
<tr>
<td>J</td>
<td>K</td>
<td>L</td>
</tr>
<tr>
<td>aaaaa</td>
<td>bbbb</td>
<td>cccc</td>
</tr>
</table>
谢谢!!! =)
解决方法
哇,我花了我一秒钟。 您的代码应该可以正常工作,在将代码复制到编辑器中之后,我发现了一个看不见的字符,但是弄乱了您下一个声明,而这个声明恰好是您遇到的麻烦:
注意第11行上的红点
删除将使您的代码无需更改即可工作。
table tr {
text-align: center;
}
table th:first-child{
text-align: left;
}
table td:first-child {
text-align: left;
}
tr:last-child>td:first-child {
border-radius: 0 0 0 10px;
background-color: blue;
}
tr:last-child>td:last-child {
border-radius: 0 0 10px 0;
background-color: red;
}
<table>
<tr><th>Hello</th>
<th>Hello1</th>
<th>Hello2</th></tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>D</td>
<td>E</td>
<td>F</td>
</tr>
<tr>
<td>G</td>
<td>H</td>
<td>I</td>
</tr>
<tr>
<td>J</td>
<td>K</td>
<td>L</td>
</tr>
<tr>
<td>aaaaa</td>
<td>bbbb</td>
<td>cccc</td>
</tr>
</table>
,
问题是,在CSS代码中,紧接第三条CSS规则的右括号之后,有一个显然不是您期望的字符。如果您删除了该代码,则您的代码将按预期工作。
table tr {
text-align: center;
}
table th:first-child{
text-align: left;
}
table td:first-child {
text-align: left;
}
tr:last-child>td:first-child{
border-radius: 0 0 0 10px;
background-color: blue;
}
tr:last-child>td:last-child{
border-radius: 0 0 10px 0;
background-color: red;
}
<table>
<tr><th>Hello</th>
<th>Hello1</th>
<th>Hello2</th></tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>D</td>
<td>E</td>
<td>F</td>
</tr>
<tr>
<td>G</td>
<td>H</td>
<td>I</td>
</tr>
<tr>
<td>J</td>
<td>K</td>
<td>L</td>
</tr>
<tr>
<td>aaaaa</td>
<td>bbbb</td>
<td>cccc</td>
</tr>
</table>