JavaFX TableView索引单元格伪选择器样式异常问题

问题分析 #

你遇到的问题核心是CSS选择器优先级冲突：.indexed-cell:even、.indexed-cell:odd和.indexed-cell:selected的优先级完全相同。当单元格同时满足「奇偶行」和「选中」状态时，单元格的背景样式会优先于行背景渲染，导致选中状态仅在行的空白填充区域生效，单元格仍保留奇偶行的灰色背景。

解决方案 #

方案1：提升选中状态选择器优先级（推荐） #

针对同时处于「奇偶行」和「选中」状态的单元格，编写优先级更高的复合选择器，确保选中样式覆盖奇偶样式：

#table .indexed-cell:even {
  -fx-background-color: #f1f5f9; /* lighter grey */
}

#table .indexed-cell:odd {
  -fx-background-color: #e2e8f0; /* darker grey */
}

#table .indexed-cell:even:selected, 
#table .indexed-cell:odd:selected {
  -fx-background-color: #f0f9ff; /* blueish white */
}

方案2：切换样式应用对象到行容器 #

将奇偶行和选中行的样式直接应用到table-row-cell（行容器），单元格会默认继承行的背景样式，这样选中状态的行背景会直接覆盖奇偶行背景：

#table .table-row-cell:even {
  -fx-background-color: #f1f5f9; /* lighter grey */
}

#table .table-row-cell:odd {
  -fx-background-color: #e2e8f0; /* darker grey */
}

#table .table-row-cell:selected {
  -fx-background-color: #f0f9ff; /* blueish white */
}

方案3：使用!important强制生效（不推荐） #

如果需要快速临时解决，可以给选中样式添加!important强制覆盖其他同优先级样式，但这种方式会破坏CSS优先级规则，不利于后续样式维护：

#table .indexed-cell:selected {
  -fx-background-color: #f0f9ff !important; /* blueish white */
}

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