gpt4 book ai didi

html - 直接 child 的备用表行颜色

转载 作者:太空宇宙 更新时间:2023-11-04 10:29:54 31 4
gpt4 key购买 nike

我想用不同的颜色为表格的行着色,所以我正在使用它

table#news tr:nth-child(even) {      
background-color: red;
}
table#news tr:nth-child(odd) {
background-color: green;
}

这种结构效果很好

<table id="news">
<tr><td>Row 1</td></tr>
<tr><td>Row 2</td></tr>
<tr><td>Row 3</td></tr>
</table>

但现在我使用的是这种表格。

<table id="news">
<tr>
<td>
<tr><td>1</td></tr>
<tr><td>2</td></tr>
</td>
</tr>
</table>

该样式也适用于行内的行。

我怎样才能继续为 <tr> 的第一级应用替代颜色? ?

最佳答案

试试这个:

table#news > tr:nth-child(even) {      
background-color: red;
}
table#news > tr:nth-child(odd) {
background-color: green;
}

> 表示它是 #news 必须是 tr 的直接父级。

为了使其工作,您还必须添加 tbody 选择器。

table#news tbody > tr:nth-child(even) {      
background-color: red;
}
table#news tbody > tr:nth-child(odd) {
background-color: green;
}

tbody 元素由浏览器自动添加。

无论如何,上面的仍然行不通,因为您不能将tr 嵌套在td 中。您需要做的是在 td 中创建一个全新的表。看到这个:Html table tr inside td

运行下面的代码片段并查看源代码。

table.news > tbody > tr:nth-child(even) {
background-color: red;
}
table.news > tbody > tr:nth-child(odd) {
background-color: green;
}
<table class="news">
<tr>
<td>Row 1</td>
</tr>
<tr>
<td>Row 2</td>
</tr>
<tr>
<td>Row 3</td>
</tr>
</table>

<table class="news">
<tr>
<td>
Test
<tr>
<td>Row 1</td>
</tr>
<tr>
<td>Row 2</td>
</tr>
<tr>
<td>Row 3</td>
</tr>
</td>
</tr>
</table>

<h1> Fixed </h1>

<table class="news">
<tr>
<td>Row 1</td>
</tr>
<tr>
<td>Row 2</td>
</tr>
<tr>
<td>Row 3</td>
</tr>
</table>

<table class="news">
<tr>
<td>
Test
<table>
<tr>
<td>Row 1</td>
</tr>
<tr>
<td>Row 2</td>
</tr>
<tr>
<td>Row 3</td>
</tr>
</table>
</td>
</tr>
</table>

关于html - 直接 child 的备用表行颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36570391/

31 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com