如果设置了 tr:nth-child(odd)，为什么 table 的 header 会改变背景颜色？

Question

在 tailwindcss 中为 header odd/even 行 table 设置背景颜色：2.2 应用我使用 css 像 :

.editor_listing_table_header {
    @apply bg-gray-700 admin_block_border border-t-2 border-b-2;
}


/*
.editor_listing_table tr:nth-child(odd) {
    background-color: #10eef9; 
}
*/

.editor_listing_table tr:nth-child(even) {
    /*background-color: #e8e8e8; !* light; *!*/
    background-color: #f1f1f1; /* 0aaf7e Green; */
}

因为第 1 行（和所有奇数行）具有页面的背景颜色 - css 因为它在上面有评论。

如果要取消注释行：

.editor_listing_table tr:nth-child(odd) {
    background-color: #10eef9;
}

然后第一行（和所有奇数行）有我需要的背景颜色，但是 header 也有这种颜色，但那不是我需要的。

我的 html :

<table class="editor_listing_table ">
    <thead class="editor_listing_table_header">
    <tr>
        <th>

更新： 如果在 css 我有 :

.editor_listing_table_header:first-child {
    background-color: olive !important; ;
}
// line below is commented :
/*.editor_listing_table tr:nth-child(odd) {*/
/*    background-color: red !important;*/
/*}*/

我在浏览器中看到的内容：https://prnt.sc/1spca6o

但是如果取消注释行：

.editor_listing_table tr:nth-child(odd)
...

Header 并不像我预期的那样橄榄：https://prnt.sc/1spcn7p

更新#2： 我在实时网站上上传了网站。请打开页面 http://hostels4j.my-demo-apps.tk/admin/facilities

在打开的登录页面中点击登录-然后打开页面 http://hostels4j.my-demo-apps.tk/admin/facilities 再次

所有样式都在我的 css 文件中：

.editor_listing_table_header {
    @apply bg-gray-700 admin_block_border border-t-2 border-b-2;
}


.editor_listing_table_header {
    background-color: olive !important; ;
}
.editor_listing_table tr:nth-child(odd) {
    background-color: red !important;
}


.editor_listing_table tr:nth-child(even) {
    /*background-color: #e8e8e8; !* light; *!*/
    background-color: #f1f1f1; /* 0aaf7e Green; */
}

我有第一、第三行是红色的（这就是我需要的。）但我也有 header 行红色（这正是我不需要的）

如果禁用 class editor_listing_table，则 header 有橄榄色背景：https://prnt.sc/1tgjl9p

正是我所期望的

如何解决？

Answer 1

给你的 header 自己的 class 并给它你想要的权利 background-color。

如果header是第child个parent那这个选项也有

parentName:first-child {
    background-color: #123456 // color you want
}

Answer 2

您只需将选择器 .editor_listing_table tr:nth-child(odd) 更改为 .editor_listing_table tbody tr:nth-child(odd)，同时添加 tbody 以便它只能将颜色添加到正文行，如果您想为头部添加不同的颜色，为此使用广告选择器

.editor_listing_table tbody tr:nth-child(odd) {
      background-color: #10eef9;
 }

Answer 3

试试这个方法，用 :not(thead) 更新你的 CSS 这可能有效

.editor_listing_table tr:nth-child(odd):not(thead) {
    background-color: #10eef9; 
}

:not() CSS pseudo-class 表示与选择器列表不匹配的元素。它还可以防止选择特定项目。在这里，由于您不希望 header 元素之一与相同的 CSS 一起应用，也许您可以使用此解决方案来解决您的问题。

如果设置了 tr:nth-child(odd)，为什么 table 的 header 会改变背景颜色？

Why header of table changes background color if tr:nth-child(odd) is set?

css

tailwind-css