gpt4 book ai didi

css - 悬停不与第 n 个 child 一起工作

转载 作者:行者123 更新时间:2023-11-28 09:02:26 25 4
gpt4 key购买 nike

他在探索 CSS 3 的特性时遇到了一些麻烦:

我为表格制作了这个 CSS:

table.sortable tbody tr td {
border-bottom:1px solid;
height: 20px;
}

table.sortable tbody tr:hover {
background-color:#BCD2E5 !important;
}

table.sortable tbody tr:nth-child(odd) td {
background-color: #F3FAFF;
}
table.sortable tbody tr:nth-child(even) td {
background-color: #FFFFFF;
}

table.new{
background-color: rgb(255, 255, 187);
}

table.reaction{
background-color: rgb(255, 128, 64);
}

table.send{
background-color: rgba(154, 211, 109, 0.470588);
}

问题是悬停不起作用,但如果我注释掉第 n 个子选择器,它确实起作用了。同样在某些情况下,我必须给一些行不同的背景颜色。这是为用户准备的,这样他们就可以很容易地看到一些东西的状态。因此,如果我将像 class="send" 这样的类分配给一行,它必须从类发送中获取背景颜色。

为什么这行不通?!还是我错过了什么!?

最佳答案

您正在将 nth-child 行的 background-color 应用到 tdtd 上的 background-color 显示在 trbackground-color 之上。

将您的 CSS 更改为以下对我有用(从 nth-child 选择器末尾删除 td):

table.sortable tbody tr:hover {
background-color:#BCD2E5 !important;
}

table.sortable tbody tr:nth-child(odd) {
background-color: #F3FAFF;
}
table.sortable tbody tr:nth-child(even) {
background-color: #FFFFFF;
}

td 添加到您的 hover 选择器的末尾,如下所示:

table.sortable tbody tr:hover td {
background-color:#BCD2E5 !important;
}

请参阅此代码笔:http://codepen.io/keithwyland/pen/woLmh


还有

如果在 CSS 中将 hover 选择器移动到 nth-child 选择器之后,那么您就不需要 !重要。所以,像这样:

table.sortable tbody tr:nth-child(odd) {
background-color: #F3FAFF;
}
table.sortable tbody tr:nth-child(even) {
background-color: #FFFFFF;
}

table.sortable tbody tr:hover {
background-color:#BCD2E5;
}

关于css - 悬停不与第 n 个 child 一起工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16193161/

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