巧用 :has 选择器实现数据和暂无数据的优雅切换

在网页开发中，处理列表数据时，经常会遇到需要根据数据的存在与否切换显示内容的情况，比如在列表为空时显示 "暂无数据" 提示。传统的做法通常是使用 v-show 指令进行切换，但这种方式会增加代码量，影响可读性。

现在，我们可以借助 CSS 中的 :has 选择器来实现这一功能，这种方式不仅简化了代码，还提升了可维护性。

:has 选择器的原理

:has 选择器允许我们选择包含特定子元素的元素。其语法为：

parent-selector:has(child-selector) {
  /* 样式规则 */
}

例如，要选择包含 li 子元素的 ul 元素，可以写成：

ul:has(li) {
  /* 样式规则 */
}

实现数据和暂无数据的切换

要使用 :has 选择器实现数据和暂无数据的切换，可以按以下步骤操作：

1. 为列表容器添加 :has 选择器 ：在列表容器元素（如 <ul> 或 <ol>）上添加 :has 选择器，并指定包含列表项（如 <li>）的子元素。

2. 设置 "暂无数据" 样式 ：为 :has 选择器设置 "暂无数据" 样式，如显示一个带有提示文本的元素。

3. 移除 "暂无数据" 样式 ：当列表中有数据时，移除 :has 选择器的 "暂无数据" 样式。

示例代码如下：

<ul id="my-list">
  <!-- 列表项 -->
</ul>

<div id="no-data" style="display: none;">暂无数据</div>

ul#my-list:has(li) {
  display: block;
}

ul#my-list:has(li) ~ #no-data {
  display: none;
}

ul#my-list:empty ~ #no-data {
  display: block;
}

在上面的示例中，当 #my-list 列表中有列表项时，:has(li) 选择器将选择列表容器并显示它，同时隐藏 "暂无数据" 元素。当列表为空时，:empty 选择器将选择列表容器并显示 "暂无数据" 元素。

优势

使用 :has 选择器实现数据和暂无数据的切换具有以下优势：

• 简化代码 ：与使用 v-show 相比，可以减少代码量和缩进级别，提高可读性。
• 提高可维护性 ：将数据切换逻辑与 UI 分离，使代码更易于维护。
• 性能优化 ：:has 选择器只会在需要时查找子元素，减少了 DOM 遍历的开销。

限制

需要注意的是，:has 选择器并不适用于所有浏览器，特别是 IE 11 及以下版本。因此，在需要支持旧浏览器的项目中，可能需要使用其他方法来实现数据和暂无数据的切换。

结语

:has 选择器提供了一种简洁且高效的方式来实现数据和暂无数据的切换，简化了代码并提高了可维护性。在实际开发中，灵活运用 :has 选择器可以使我们的前端代码更加优雅和高效。