如果tr:n -child(odd)被设置，为什么表头改变背景颜色?

Question

在tailwindcss: 2.2应用程序中设置表头的奇数行/偶数行背景颜色。

.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; */
}

作为结果第一行(以及所有奇数行)具有页面的背景色-作为上面注释的CSS。

如果取消注释行:

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

然后第一行(和所有奇数行)有我需要的背景色，但标题也有这个颜色，这不是我需要的。

我的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)
...

标题不是我期望的橄榄:https://prnt.sc/1spcn7p

UPDATED # 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; */
}

我有红色的第一，第三行(这就是我需要的)。但我也有标题行在红色(这正是我不需要的)

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

• 正合我意

如何修复

Answer 1

你只需要改变你的选择器.editor_listing_table tr:nth-child(odd)与.editor_listing_table tbody tr:nth-child(odd)，添加主体，这样它只能添加颜色到主体行，然后如果你想添加不同的颜色到头部，使用头部选择器

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

Answer 2

给你的标题自己的类，并给它正确的background-color，你想要的

如果标题是父元素的第一个子元素，则此选项也在

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

Answer 3

试试这个方法，用:not(thead)更新你的CSS，这可能行得通

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

:not()CSS伪类表示不匹配选择器列表的元素。它还可以防止特定项目被选中。在这里，因为你不希望其中一个元素是头部应用相同的CSS也许你可以使用这个解决方案来解决你的问题。