摘要

  • W3C 2018 年 11 月的 Selectors Level 4 草案用 :has() 描述元素与孩子、后续兄弟元素的关系，但在当时供 CSS 实时匹配的配置中排除了它。
  • 2022 年 5 月草案删除配置分层，将 :has() 列为可选且待验证的功能；11 月草案进一步禁止嵌套 :has()，并限制在其中使用伪元素。

编辑把一张照片放进首页的新闻卡片。照片一到，外层卡片应当多留白，标题也该换个位置。CSS 可以轻松找到卡片里的照片，为照片加边角或调整大小；让卡片因为拥有照片而改变自己，则一度像要求家长从没收到过的家书里读出消息。网页只好额外贴个类名、让脚本数孩子，或在模板里重复登记一次“有图”。真正的事实就在文档里，外框却得等专人敲门报告。

W3C 2018 年 11 月 21 日的 Selectors Level 4 草案已经写出 :has() 的问法。a:has(> img) 选中直接包含图片的链接：被选的是链接，图片只是证明。草案还给出 dt:has(+ dt)，选中后面紧跟另一个术语的定义术语。第二个例子给“父选择器”这个外号拆了台。:has() 不只听孩子来信，还会看下一户邻居是否就在门口。它测试的是以当前元素为起点的一段关系。

但 2018 年的方案给它安排了一间候诊室。草案把选择器分成实时配置与快照配置。实时配置适用于浏览器持续进行的 CSS 匹配，快照配置面向不那么敏感于性能、在某一刻检查静态文档树的场景；文中拿 querySelector() 举例。:has() 属于快照配置，明确被排除在实时配置之外。查询工具能问“这个链接有没有图片”，活着的样式表却不能照那份草案这样问。文本还请实现者审视这种分法。门牌已经写好了，正门仍暂时上锁。

2022 年 5 月 7 日的草案换了一套门禁。修订记录说明，实时与快照的配置分层被删除，:has() 改列为可选、待验证的功能。规范不再按“静态查询可以，实时 CSS 不行”划一条硬线；实现者仍可自行决定是否支持。家长有了问话的规则，浏览器则按各自采用的规则处理这封信。草案改变的是规范的结构，不能靠发布日期代替浏览器的实际选择。

问句里的符号尤其要读清。a:has(> img) 的 > 指直接孩子；若换成别的关系，选中的链接就可能不同。dt:has(+ dt) 的 + 指紧接着的兄弟。CSS 最后选择的是冒号前的元素，括号里的相对选择器负责交证据。网站可以据此给含图卡片更宽的版面，或给连续出现的术语不同的间距。文档树照旧，变化发生在外框的打扮上。

同一份 2022 年 5 月草案还埋了一道适合考校对的题。section:not(:has(h1, h2, h3, h4, h5, h6)) 找的是没有标题后代的章节。把括号改成 section:has(:not(h1, h2, h3, h4, h5, h6))，问题就成了：章节里有没有任何不是标题的东西？一段普通正文足够让后者成立，即使章节标题好端端地站在那里。括号只挪了一点，编辑部的筛选名单就换了人。标点在这里有决定权。

2022 年 11 月 11 日的修订给这种好奇心画了边界。:has() 不能嵌套在另一个 :has() 里；伪元素通常也不能放进其参数。草案解释，某些伪元素是否存在，取决于祖先元素的样式；若祖先又反过来依据它们决定样式，就可能绕成环。家长可以问孩子的情况，不能把“我今天怎么穿”变成凭自己穿着生成孩子、再让孩子决定自己怎么穿的游戏。

W3C 的发布记录串起 2018 年与 2022 年的版本。沿着它们读，故事不是一行神奇语法突然降临，而是一个曾被挡在实时样式门外的关系测试，逐步得到进入规则，同时保留采用和循环边界。浏览器负责判断文档树里的关系；网站负责决定这种关系是否值得改变页面。卡片确有照片，就让卡片为照片腾位。事实在屋里，外框终于能自己开门看看。

家长收到了孩子的信。更妙的是，隔壁那位紧跟着出现的邻居也寄来一张明信片。