为什么 CSS :hover 高亮表格外框时，只高亮了单元格？

CSS :hover 高亮表格外框

在 CSS 中，hover 伪类用于在将鼠标移至某个元素上方时应用样式。但是，如果使用不当，可能会导致不期望的高亮效果。

问题：

给定的 CSS 规则会高亮表格中单元格（<td>），而不是表格的外边框。

.flex-box table :hover {
  border: 1px solid #9dd8f7 !important;
}

答案：

要解决此问题，需要删除伪类选择器前方的空格：

.flex-box table:hover {
  border: 1px solid #9dd8f7 !important;
}

通过删除空格，hover 伪类将直接应用于表格元素（<table>），而不是将其嵌套的单元格。因此，当鼠标悬停在表格上方时，外边框将正确高亮。