无需登录 数据私有 本地保存

CSS 伪类效果测试场 - 实时查看 :is() :where() :has()

CSS 开发工具 CSS :has 伪类 选择器
39
0
0
0

CSS 伪类效果测试场

:has() :is() :where()
实时预览
CSS 选择器
匹配： 0 个元素
预设示例
新发布

特色文章标题

这是一个包含图片的特色卡片，使用:has()可以选择包含特定元素的父级。

热门

精选内容

此卡片没有图片但包含badge标签，适合测试不同条件的:has()选择器。

主要操作 次要操作
普通卡片

基础卡片，用于对比测试。包含图片但不含badge。

简约卡片

这是一个最简卡片结构，没有任何额外装饰元素。

使用div而非article标签

热门 精选

多功能卡片

同时拥有多个类名和多个badge，测试复杂选择器组合。

  • 📁 父级列表项 A
    • 📄 子列表项 A-1
    • 📄 子列表项 A-2
  • 📁 父级列表项 B
    • 📄 子列表项 B-1
  • 📄 普通列表项 C（无子列表）
  • 📄 普通列表项 D（无子列表）
  • 📁 父级列表项 E
    • 📄 子列表项 E-1
    • 📄 子列表项 E-2
    • 📄 子列表项 E-3

区块标题 H2

副标题 H3 - 在section内

使用:is()和:where()可以简洁地匹配多个标题级别。例如:is(h2, h3, h4)一次性选中多个层级的标题元素。

小标题 H4

这个section包含h2、h3和h4，非常适合测试标题选择器。

确认 取消 更多选项
当前选择器未匹配到任何元素
尝试更换选择器或查看预设示例
常见问题与知识点
:is() 和 :where() 有什么区别？
:is() 和 :where() 功能相同，都接受选择器列表作为参数，匹配列表中任意一个选择器。关键区别在于特异性（Specificity）：
• :is() 的特异性 = 参数中最高特异性的选择器的值
• :where() 的特异性始终为 0（即不增加任何特异性权重）
这意味着使用 :where() 的规则更容易被覆盖，非常适合用作基础样式或重置样式。
:has() 选择器有什么用？为什么被称为"父选择器"？
:has() 允许你根据后代元素来选择父元素，这是CSS中长期缺失的能力。例如：
• article:has(img) — 选择包含图片的article
• div:has(> .badge) — 选择直接包含.badge子元素的div
• li:has(> ul) — 选择包含嵌套列表的li
:has() 在2023年底获得所有主流浏览器支持，是现代CSS的重要里程碑。
什么时候应该使用 :is() 而不是直接写多个选择器？
使用 :is() 可以大幅简化重复的选择器模式：
• 简化前：section h2, section h3, section h4, article h2, article h3, article h4
• 简化后：:is(section, article) :is(h2, h3, h4)
这不仅代码更简洁，也更容易维护和阅读。嵌套使用 :is() 可以组合出非常灵活的选择器。
:has() 的性能如何？可以嵌套使用吗？
:has() 的性能经过浏览器优化，在大多数场景下表现良好。它可以嵌套使用：
• div:has(article:has(img)) — 选择包含（含图片的article）的div
不过应避免过度复杂的嵌套和在大范围（如 *:has(...)）使用，以免影响页面性能。在合理范围内使用完全没问题。
浏览器对这几个伪类的兼容性如何？
• :is() 和 :where()：所有现代浏览器均支持（Chrome 88+, Firefox 78+, Safari 14+, Edge 88+）
• :has()：Chrome 105+, Edge 105+, Safari 15.4+, Firefox 121+（2023年底全面支持）
对于需要兼容旧浏览器的项目，建议使用 @supports selector(:has(*)) 进行特性检测并提供回退方案。
🔧 相关工具