html - 在 HTML 中查询是否使用显示不同输出的标记

问题描述

我有两种情况，使用和不使用<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>。提前致谢。

标签： htmlcss

当您有 a 时，其中<thead>有odd一行，其他 3 个兄弟行作为表的子级 - 实际上是tbody - ( odd, even, odd)

没有thead所有行都是兄弟，所以你有odd, even, odd, even.

换句话说：一行相对于它的直接父（或其兄弟）来说是奇数甚至偶数。

来自 MDN：

:nth-child() CSS 伪类根据元素在一组兄弟中的位置匹配元素。

html - 在 HTML 中查询是否使用显示不同输出的标记

问题描述

解决方案

推荐阅读