巧用 CSS :not 与 Ant Design ProTable

导言

CSS 伪类选择器 :not() 提供了一种强大且灵活的方式来排除匹配特定条件的元素。这在使用组件库（如 Ant Design ProTable）时特别有用，可以实现更精细的样式控制和功能优化。

了解 CSS :not

:not() 伪类选择器允许您指定一个或多个元素，这些元素不应包含在选择器中。它的语法如下：

element:not(selector1, selector2, ...) {
  /* CSS styles here */
}

例如，以下代码将选择所有 <li> 元素，但排除具有 selected 类的元素：

li:not(.selected) {
  /* CSS styles here */
}

在 Ant Design ProTable 中使用 :not

Ant Design ProTable 是一个用于展示和操作表格数据的组件库。通过利用 :not() 伪类选择器，您可以实现以下优化和增强：

1. 排除特定行：

.ant-table-row:not(.ant-table-row-selected) {
  /* CSS styles for non-selected rows */
}

2. 突出显示悬停行（排除表头）：

.ant-table-container table tbody tr:not(.ant-table-thead):hover {
  /* CSS styles for hovered rows, excluding the table header */
}

3. 隐藏编辑表单（排除标题行）：

.ant-table-edit-form:not(.ant-table-row) {
  display: none;
}

实际应用案例

案例 1：表格行交替颜色

使用 :not() 可以轻松为表格行设置交替颜色，而无需使用额外的 HTML 代码：

.ant-table-row:nth-child(even):not(.ant-table-row-selected) {
  background-color: #f5f5f5;
}

案例 2：禁用特定行操作

通过 :not() 排除特定的行，您可以禁用对这些行的某些操作。例如，以下代码禁用对包含 disabled 类名的行的编辑和删除操作：

.ant-table-row.disabled:not(.ant-table-row-selected) {
  pointer-events: none;
}

结论

CSS :not() 伪类选择器是一种强大的工具，可以显著增强 Ant Design ProTable 的功能和样式。通过合理利用 :not(), 您可以更精确地控制元素选择，实现更复杂和可定制的解决方案。