Front-End-Checklist 的 :has() 技能指南用 CSS 关系伪类替换 JavaScript 类切换【免费下载链接】Front-End-Checklist The essential checklist for modern web development, for humans and AI agents项目地址: https://gitcode.com/gh_mirrors/fr/Front-End-Checklist本文以 Front-End-Checklist 仓库中的has-selector技能文档为主体结合其配套的规则源文件与工具链实现系统讲解 CSS:has()关系伪类的原理、实战场景与性能边界并给出可直接复制使用的代码示例与验证方法。读完你将掌握用一条 CSS 规则替代根据子元素状态切换父元素类名的 JavaScript 逻辑并能在不同浏览器环境中安全落地。一、技能文档定位从规则到可执行技能Front-End-Checklist 将前端质量检查清单沉淀为结构化内容每一条规则rule存放在 packages/content/rules/en/css/has-selector.mdx而 skills/has-selector/SKILL.md 则是把该规则包装成可供人类开发者与 AI Agent 直接使用的技能文件。SKILL.md 的 front matter 明确定义了本技能的作用边界元数据字段值含义namehas-selector技能唯一标识categorycss归属于 CSS 类目prioritylow优先级较低属于锦上添花型优化difficultyintermediate适合有 CSS 选择器基础的中级开发者estimatedTime20预计耗时 20 分钟sourcefrontendchecklist.io规则源自前端清单站点其description字段给出技能的触发条件在审查样式表或组件时如果发现它们用 JavaScript 根据子元素状态、表单输入值或内容存在性来切换父元素类名——:has()可能完全替代这段 JavaScript。技能正文定义了四个可执行工作流与 MDX 源文件中的prompts字段一一对应见 packages/content/rules/en/css/has-selector.mdxCheck检查在代码中寻找JavaScript 根据子元素状态或内容切换父元素类名的模式Fix修复用 CSS:has()选择器替换 JavaScript 类切换逻辑并给出命中父元素的等价选择器Explain解释说明:has()的工作原理、与:is()、:not()的区别、选择器内子/后代组合子的语义以及当前浏览器支持状况Code Review代码审查审查样式表与组件 JavaScript标记所有父元素样式由 JS 类切换控制的位置并给出对应的:has()规则。二、核心概念什么是 :has() 关系伪类:has()是 CSS Selectors Level 4 引入的关系伪类relational pseudo-class它接收一个选择器列表作为参数只要参数匹配的元素是当前元素的后代或相关元素当前元素就会被选中。换句话说它让根据内容选择容器成为可能。/* 选择包含 img 元素的 .card */ .card:has(img) { display: grid; grid-template-columns: 200px 1fr; } /* 选择后面紧跟 ul 的 p相邻兄弟 */ p:has( ul) { margin-bottom: 0.25rem; } /* 选择包含聚焦元素的 section */ section:has(:focus-visible) { outline: 2px solid var(--color-focus); }与 :is() / :not() 的区别:is()用于把多个选择器合并、统一它们的选择器优先级它匹配的是元素自身是否符合参数中的任一选择器:not()匹配自身不满足参数条件的元素同样是作用于元素自身:has()匹配的是容器——判断的是参数条件是否在容器内部或与其相关的元素上成立。它不改变被选元素的优先级优先级即参数中最具体选择器的优先级但语义上是向上/向外的选择能力。一句话概括:is()和:not()横向扩展匹配条件:has()纵向建立父子关系这正是它被称为CSS 等了数十年的父选择器的原因。为什么重要在:has()出现之前根据子元素状态改变父元素样式必须依赖 JavaScript监听状态变化、切换类名、保持 DOM 与样式同步。这造成了两层耦合样式逻辑与应用逻辑耦合——样式状态散落在脚本里DOM 与 CSS 状态同步问题——漏切换类名就会产生样式不一致。:has()把这种关系放回 CSS 本身减少 JavaScript 复杂度、消除类切换样板代码让样式意图直接在样式表中可读。这也是 packages/content/rules/en/css/has-selector.mdx 中whyItMatters字段的核心论点。三、实战场景一基于输入状态的表单样式表单是最典型的:has()落地场景——输入框的校验状态:valid/:invalid由浏览器原生维护无需任何 JavaScript 监听。/* 输入框无效且非空时整个表单组进入错误态 */ .form-group:has(input:invalid:not(:placeholder-shown)) { --border-color: var(--color-error); } .form-group:has(input:invalid:not(:placeholder-shown)) .form-label { color: var(--color-error); } .form-group:has(input:invalid:not(:placeholder-shown)) .form-error { display: block; /* 显示错误信息 */ } /* 字段集内所有必填输入均有效时呈现成功态 */ fieldset:has(input[required]:valid):not(:has(input[required]:invalid)) { border-color: var(--color-success); } /* 复选框驱动的区块显隐——零 JavaScript */ .settings-panel:has(input[typecheckbox]:checked) .settings-detail { display: block; }其中fieldset:has(input[required]:valid):not(:has(input[required]:invalid))演示了:has()与:not()的嵌套组合全部有效用:has(...:valid)表达且无一无效用:not(:has(...:invalid))排除。这类写法将校验状态完全收敛到 CSS配合:placeholder-shown还能避免空输入过早触发错误态。四、实战场景二基于内容存在性的卡片布局内容是否包含某类元素图片、徽章、图表在传统方案中需要渲染时在 JS 里判断并输出不同类名:has()让布局直接对内容结构做出响应。/* 无图卡片与有图卡片采用不同的网格模板 */ .card:has(img) { grid-template-areas: image content footer; } .card:not(:has(img)) { grid-template-areas: content footer; } /* 带徽章的卡片增加顶部内边距 */ .card:has(.badge) { padding-top: 2.5rem; } /* 含 figure 的文章采用双栏布局 */ .article:has(figure) { display: grid; grid-template-columns: 1fr 280px; gap: 2rem; }:has(img)与:not(:has(img))成对使用等于在 CSS 里实现了if 元素含图片 / else的分支逻辑且内容增删时样式自动跟随无需重新运行脚本。五、实战场景三导航高亮的无 JS 实现导航当前页高亮通常依赖后端渲染或前端脚本往链接上打aria-current或active类。:has()可以直接基于aria-current属性它本身也是无障碍标准属性驱动整条导航项的状态/* 高亮链接指向当前页的导航项 */ .nav-item:has(a[aria-currentpage]) { background: var(--color-nav-active-bg); border-radius: 0.375rem; } .nav-item:has(a[aria-currentpage]) a { color: var(--color-nav-active-text); font-weight: 600; } /* 含当前页链接的导航分组自动展开 */ .nav-section:has(a[aria-currentpage]) .nav-section-list { display: block; }六、实战场景四主题切换不写一行 JS一个经典用例用select或input控制整页主题。以往需要脚本监听变更并给html加dark类现在一个 radio 的状态即可完成/* 页面主题由 radio 驱动——无需 JS */ html:has(#theme-dark:checked) { color-scheme: dark; --bg: #0f172a; --fg: #f1f5f9; } html:has(#theme-light:checked) { color-scheme: light; --bg: #ffffff; --fg: #0f172a; }这一模式在规则源文件中被标注为与 packages/content/rules/en/css/dark-mode-css 规则强相关relatedRules字段:has()作用于html/body元素驱动主题切换正对应仓库中 dark-mode-css 规则的审查方向同时--bg/--fg自定义属性的使用也让该示例天然衔接 css-custom-properties 规则中用自定义属性在级联中传递状态的思想。七、:has() 内的关系组合子与性能边界:has()参数接受完整的选择器语法包括各类组合子因此它不止能做后代存在判断/* 直接子元素 */ .parent:has( .direct-child) { … } /* 相邻兄弟该元素之后还有兄弟元素 */ h2:has( p) { margin-bottom: 0.5rem; } /* 后续兄弟 */ .alert:has(~ .alert) { /* 该元素之后还有另一个 alert */ } /* 属性选择器 */ figure:has(figcaption[hidden]) { /* 图注处于隐藏状态 */ }⚠️ 性能警示热重排路径:has()配合复杂后代选择器时若浏览器在频繁重排滚动、缩放、动画中需要反复计算样式代价可能很高。应避免在频繁重绘的元素上使用深层嵌套或过于宽泛的:has()选择器优先把:has()限定在具体子树内如.card:has(img)而不是根级通配符或纯标签选择器。这条警示直接来自规则源文件中的Warning组件packages/content/rules/en/css/has-selector.mdx是技能文档明确要求 Code Review 阶段重点核对的项目之一。八、浏览器支持与回退策略:has()于2023 年底达成 Baseline 支持主流浏览器全部可用Chrome / Edge 105Firefox 121Safari 15.4对于需要兼容旧环境的场景规则文档推荐用supports selector(:has(*))提供回退——注意必须用selector()函数包住选择器本身因为仅检查属性支持无法判断选择器语法是否可用/* 基础样式对所有人生效 */ .card { display: block; } /* 仅在 :has() 可用时启用增强布局 */ supports selector(:has(*)) { .card:has(img) { display: grid; grid-template-columns: 200px 1fr; } }仓库在工具链层面也印证了兼容性关注脚本 scripts/lib/rule-support-data.ts 将has-selector规则映射到 MDN 浏览器兼容性数据BCD特性css.selectors.has并借助mdn/browser-compat-data、baseline-browser-mapping与browserslist计算该规则在各目标浏览器中的支持情况与 Baseline 最低版本——这意味着规则的浏览器支持信息是由兼容性数据驱动、随数据源更新的而非硬编码结论。九、验证清单如何确认 :has() 落地正确规则文档给出了一套可操作的验证步骤packages/content/rules/en/css/has-selector.mdx打开浏览器 DevTools检查命中:has()规则的元素确认规则出现在 Styles 面板且在匹配后代存在时确实生效移除匹配的后代确认样式不再应用——验证选择器对 DOM 变化是动态响应的查询兼容性表或用supports selector(:has(*))确认目标用户环境可用或已放置回退若:has()作用于频繁更新的元素用 DevTools Performance 面板剖析页面确认没有过度的样式重算时间。十、仓库实践佐证项目自身的 :has() 应用值得注意的是本仓库的 Web 应用在自己的样式里已经实践了这一模式。在 apps/web/app/globals.css 中可以找到多个真实用例基于[data-rehype-pretty-code-figure]:has(pre)/:not(:has(pre))第 768、774 行对代码块渲染容器做差异化布局使用.prose ul.contains-task-list li:has( input[typecheckbox]:checked)::before/::after第 1526、1531 行为已勾选任务项绘制对勾标记——用:has()检查直接子输入框的checked状态。这些选择器与技能文档中的模式一一对应说明:has()不是理论示例而是已被本项目生产代码采用、可被直接审阅的实践证据可作为技能落地时查看真实可运行的实现的参考样本。参考资源技能文件skills/has-selector/SKILL.md规则详细文档packages/content/rules/en/css/has-selector.mdx规则支持性工具链映射scripts/lib/rule-support-data.ts项目生产代码中的 :has() 示例apps/web/app/globals.css【免费下载链接】Front-End-Checklist The essential checklist for modern web development, for humans and AI agents项目地址: https://gitcode.com/gh_mirrors/fr/Front-End-Checklist创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考