考察点分析

本题主要考察以下能力维度：

  1. 现代CSS选择器原理：对CSS Level 4新特性的掌握程度
  2. 样式计算机制：特异性（Specificity）计算规则的精准理解
  3. 可访问性设计：无障碍交互模式的实践能力

具体技术评估点：

  • :has()伪类的文档树关系匹配能力
  • :is()选择器的特异性计算方式
  • :focus-visible的输入模式检测机制
  • 伪类选择器与浏览器渲染性能的关系
  • 无障碍设计规范（WCAG）的实践应用

技术解析

关键知识点

:has() > :is() > :focus-visible

1. :has()关系选择器

  • 原理：逆向选择祖先元素的函数式伪类，通过检查子元素是否存在匹配项来确定父元素选择
  • 突破性：首次实现CSS对父元素的回溯选择（CSSOM构建阶段处理）
  • 误区：部分浏览器需启用实验性标志/annot be used with pseudo-elements

2. :is()特异性计算

  • 规则：取参数列表中最高特异性的选择器
  • 公式：特异性 = max(参数列表每个选择器的特异性)
  • 示例：:is(.class, #id)的特异性等同于#id（1,0,0 > 0,1,0）

3. :focus-visible可访问性

  • 机制：基于UA启发式判断焦点触发方式（键盘/鼠标）
  • 对比：传统:focus会同时响应鼠标和键盘操作造成视觉干扰
  • 优化：减少非必要焦点轮廓，同时保证WCAG 2.4.7可见焦点要求

问题解答

1. :has()使用场景 

  /* 选择包含<img>子元素的<section> */
section:has(> img) {
  border: 2px solid #ccc;
  padding: 1rem;
}

/* 选择包含错误类输入的父表单容器 */
.form-group:has(.input-invalid) {
  background-color: #ffe6e6;
}

解析：通过父子关系构建上下文感知样式，解决传统CSS需要额外类名的痛点

2. :is()特异性规则 

  /* 特异性计算为1,0,0（ID选择器级） */
:is(#main, .sidebar, header) {...}

/* 等效于传统写法 */
#main, .sidebar, header {...} /* 特异性分别为(1,0,0)/(0,1,0)/(0,0,1) */

关键差异：当使用:is()时，整个选择器组继承参数列表中最高特异性值

3. :focus-visible优势 

  button:focus {
  outline: none; /* 移除默认轮廓 */
}

button:focus-visible {
  box-shadow: 0 0 0 3px #4a9cff; /* 仅键盘导航时显示 */
}

可访问性提升：避免鼠标点击产生视觉干扰，同时保证键盘用户的焦点可见性符合WCAG 2.4.7标准

解决方案

渐进增强方案 

  /* :has()优雅降级 */
@supports selector(:has(*)) {
  nav:has(.dropdown:hover) { background: #f8f9fa; }
}

/* :focus-visible polyfill处理 */
button:focus-visible { ... }
.js-focus-visible button:focus:not(.focus-visible) { outline: none; }

性能优化

  • 避免深层嵌套:has()（如:has(div ul li)）导致样式重算成本增加
  • 对:is()参数列表进行选择器复杂度排序（高特异性选择器前置）

深度追问

追问1：:where()与:is()特异性差异？

答：:where()始终将特异性归零，用于覆盖特异性战争场景

追问2：如何检测浏览器:focus-visible支持？

答：通过CSS.supports(‘selector(:focus-visible)’)进行特性检测

追问3：:has()不能与哪些伪类联用？

答：不能与:has、:host、:slotted等伪类嵌套使用

Edit this page

Last updated 06 Mar 2025, 13:07 +0800 . history