WordPress表格：奇偶行变色+悬停显示第四列‘View’文本求助

问题 #

我有一个6列的表格，已设置奇偶行交替背景色、选中行高亮效果，用于展示可点击查看的PDF文档，目前功能正常。但我不想提示用户双击行，而是希望将每行第四列的‘View’文本设置为与对应行背景色一致以隐藏，当鼠标悬停该行时，将该文本颜色改为与其他单元格一致（即显示出来）。我当前的CSS代码如下：

.tableid .row-hover tr:hover td {
    background-color: #b3f0ff;
    color: #000000;
}

.tableid .odd td {
    background-color: #DFF2FE;
    color: #000000;
}

.tableid .even td {
    background-color: #F2FAFF;
    color: #000000;
}

.tableid .selected tr {
    background-color: #FF0000;
    color: #FFFFFF;
}

我尝试过多种单元格选择器（包括子选择器）但均未成功，不清楚是否遗漏了关键细节，特此求助。另外，该表格位于WordPress环境中。

解决方案 #

要实现第四列“View”文本隐藏/悬停显示的效果，核心是精准定位第四列单元格，并针对不同行状态设置对应的文字颜色，同时注意选择器优先级避免被全局样式覆盖。以下是修改后的完整CSS：

/* 奇偶行第四列默认隐藏：文字色与背景色一致 */
.tableid .odd td:nth-child(4) {
    color: #DFF2FE;
}
.tableid .even td:nth-child(4) {
    color: #F2FAFF;
}

/* 行悬停时，第四列文字恢复默认黑色 */
.tableid .row-hover tr:hover td:nth-child(4) {
    color: #000000;
}

/* 保留原有基础样式 */
.tableid .row-hover tr:hover td {
    background-color: #b3f0ff;
    color: #000000;
}

.tableid .odd td {
    background-color: #DFF2FE;
    color: #000000;
}

.tableid .even td {
    background-color: #F2FAFF;
    color: #000000;
}

.tableid .selected tr {
    background-color: #FF0000;
    color: #FFFFFF;
}

/* 补充选中行时第四列的文字色，保持与选中行文字一致 */
.tableid .selected tr td:nth-child(4) {
    color: #FFFFFF;
}

关键细节说明： #

1. 精准定位第四列：使用td:nth-child(4)选择器直接锁定每行的第四列单元格，这是实现效果的核心；
2. 优先级控制：单独给第四列设置的颜色规则优先级高于全局td规则，确保隐藏效果生效；
3. 选中行适配：补充选中行状态下第四列的文字颜色，避免选中时“View”文本因隐藏规则出现显示异常；
4. WordPress环境适配：如果样式不生效，可尝试给选择器添加父容器类名提升优先级（比如#content .tableid .odd td:nth-child(4)），或临时使用!important强制生效（优先推荐调整选择器优先级）。

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