我有两种情况，使用和不使用 <thead></thead> 的 HTML 脚本显示不同。标签。
场景 1:(带有 <thead></thead> 标签)
<!DOCTYPE html>
<meta charset = "UTF-8"/>
<head>
<title>HTML PAGE</title>
</head>
<link rel = "stylesheet" href = "TEST_CSS.CSS"> <!--Linking our .CSS sheet-->
<body>
<table border="1">
<caption>EXAMPLE TABLE</caption>
<thead>
<tr>
<th colspan = "2">NAME</th>
<th>AGE</th>
<th>SEX</th>
</tr>
</thead>
<tr>
<td>REBEL RIDER</td>
<td>RR</td>
<td>5</td>
<td>MALE</td>
</tr>
<tr>
<td>IGR</td>
<td>4:20R</td>
<td>11</td>
<td>MALE</td>
</tr>
<tr>
<td colspan = "4">END OF THE TABLE</td>
<tr/>
</table>
</body>
场景 2:(没有 <thead></thead>)
<!DOCTYPE html>
<meta charset = "UTF-8"/>
<head>
<title>HTML PAGE</title>
</head>
<link rel = "stylesheet" href = "TEST_CSS.CSS"> <!--Linking our .CSS sheet-->
<body>
<table border="1">
<caption>EXAMPLE TABLE</caption>
<tr>
<th colspan = "2">NAME</th>
<th>AGE</th>
<th>SEX</th>
</tr>
<tr>
<td>REBEL RIDER</td>
<td>RR</td>
<td>5</td>
<td>MALE</td>
</tr>
<tr>
<td>IGR</td>
<td>4:20R</td>
<td>11</td>
<td>MALE</td>
</tr>
<tr>
<td colspan = "4">END OF THE TABLE</td>
<tr/>
</table>
</body>
我在上述 2 种情况下使用通用 CSS 来设置每 2 行的样式，如下所示。
tr:nth-child(2n)
{
background-color: #ccc;
}
对于上述两种情况，我得到了不同的输出。
输出(场景 1)
输出(场景 2)
我的问题是<thead></thead> 的作用是什么？以不同方式显示输出。提前致谢。
最佳答案
当你有一个 <thead>你有一个odd其中的行，以及其他 3 个 siblings 行作为表的子级 - 实际上是 tbody -(odd，even，odd)
没有thead所有行都是 sibling ，所以你有 odd , even , odd , even .
换句话说:相对于它的直接父级(或其兄弟)，一行是奇数或偶数。
来自 MDN:
The :nth-child() CSS pseudo-class matches elements based on their position in a group of siblings.
关于html - 在 HTML 中查询使用和不使用标签 <thead></thead> 显示不同的输出，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50392149/