为什么:first-child伪类选择器会选中父元素下所有层级的首/尾子元素

你编写的CSS选择器存在两处逻辑错误：

• table :first-child、table :last-child中table和伪类之间的空格属于后代选择器标识，含义是匹配table所有后代元素里，属于各自父元素第一个/最后一个子节点的所有元素，因此所有tr、th、td只要是父级的首尾子元素都会被命中，才会出现大面积绿色的错误效果。
• table tbody:nth-child(odd)的选择对象错误，你想要选中的是tbody下的奇数行<tr>，当前写法只会选中作为table子元素的奇数位tbody，你页面只有1个tbody，会导致整个tbody全部变红。

CSS 代码 #

table {
    border: 1px solid #c4dcf3;
    border-collapse: collapse;
}
th, td {
    border: 1px solid #c4dcf3;
    padding: 6px 12px;
}
/* 选中表头、表脚行设置绿色背景 */
thead tr, tfoot tr {
    background-color: green;
}
/* 选中tbody内的奇数行设置红色背景 */
tbody tr:nth-child(odd) {
    background-color: red;
}

HTML 代码（原有结构无需修改） #

<table>
    <thead>
        <tr>
            <th>Country</th>
            <th>OrderID</th>
            <th>Order Amount</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>USA</td>
            <td>1000</td>
            <td>$1,300</td>
        </tr>
        <tr>
            <td>USA</td>
            <td>1001</td>
            <td>$700</td>
        </tr>
        <tr>
            <td>CA</td>
            <td>1002</td>
            <td>$2,000</td>
        </tr>
        <tr>
            <td>CA</td>
            <td>1003</td>
            <td>$1,000</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>Total</td>
            <td></td>
            <td>$5,000</td>
        </tr>
    </tfoot>
</table>

修正后即可实现表头、表脚行背景为绿色，tbody内奇数行背景为红色的预期表格效果。

内容的提问来源于stack exchange，提问作者MiiRana