gpt4 book ai didi

html - 在 HTML 中查询使用和不使用标签 显示不同的输出

转载 作者:太空宇宙 更新时间:2023-11-03 22:27:34 26 4
gpt4 key购买 nike

我有两种情况,使用和不使用 <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)

enter image description here

输出(场景 2)

enter image description here

我的问题是<thead></thead> 的作用是什么?以不同方式显示输出。提前致谢。

最佳答案

当你有一个 <thead>你有一个odd其中的行,以及其他 3 个 siblings 行作为表的子级 - 实际上是 tbody -(oddevenodd)

没有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/

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