:is() 是 CSS 伪类函数，需写在 style 标签或外部 CSS 中；现代浏览器支持，但须用标准语法、避免非法选择器；其优先级取参数中最高者，不同于 :where() 的零优先级；不可与 jQuery .is() 混淆。
:is() 不是 HTML 的功能，它是 CSS 的伪类函数，必须写在 <style> 里或外部 CSS 文件中，不能直接用在 HTML 标签上（比如 <div is="..."> 是无效的）。
怎么写 :is() 才不会被浏览器忽略
现代浏览器（Chrome 100+、Firefox 98+、Safari 15.4+）原生支持 :is()，但注意两点：
- 必须用标准语法：
:is(选择器1, 选择器2)，括号内用英文逗号分隔，不能有空格干扰解析（如:is(h1 , h2)在某些旧版 Safari 中会失败） - 如果列表里包含非法选择器（比如
:is(h1, ::before)），整个:is()规则会被浏览器静默丢弃——它有容错机制，但只跳过无效项，不报错也不提示 - 不要嵌套在
@supports里做“兼容性兜底”：@supports (selector(:is(*)))写法在部分 Edge 版本中不可靠，建议直接用caniuse查目标环境再决定是否启用
:is() 和 :where() 关键区别在哪
两者都接受选择器列表，但行为完全不同：
-
:is()的优先级取参数中**最高那个**：比如:is(.btn, #submit)整体特异性 = ID 选择器的 0-1-0，不是平均值也不是最低值 -
:where()的优先级永远是 0-0-0：哪怕写:where(#nav, .sidebar, div[role="banner"])，它也压不过最普通的h1元素选择器 - 这意味着：
:is()更适合替代手写逗号分隔的长列表（保持原有覆盖力），而:where()更适合写基础重置或默认样式，不怕被后续规则意外覆盖
常见误用：把 :is() 当 jQuery 的 .is() 用
这是两个完全无关的东西：
立即学习“前端免费学习笔记（深入）”；
- CSS 的
:is()是声明式样式匹配，作用于渲染层，无 JS 运行时开销 - jQuery 的
.is()是运行时方法，返回布尔值，常用于条件判断，比如$('div').is('.active') - 混淆会导致你试图在 CSS 里写
:is('.active')去检测某个 div 是否有该类——这毫无意义，CSS 不做运行时判定，它只按规则匹配所有符合条件的元素 - 如果你真需要动态判断并加 class，应该用 JS 操作
element.classList.contains()，而不是指望 CSS 选择器“执行逻辑”
真正省事的写法示例
别只记语法，看实际怎么减代码量：
/* 改写前：重复结构太多 */
article h1, article h2, article h3,
section h1, section h2, section h3,
aside h1, aside h2, aside h3 {
line-height: 1.3;
}
<p>/<em> 改写后：语义清晰，维护点唯一 </em>/
:is(article, section, aside) :is(h1, h2, h3) {
line-height: 1.3;
}注意：这里用了两层 :is()，第一层选容器，第二层选标题，比写成 :is(article h1, article h2, ...) 更易读，也避免漏掉某一种组合。
真正容易被忽略的是：当你要给 :is() 里的某个子选择器单独加样式时（比如只想让 section h2 加 margin），得另写一条更高特异性的规则——:is() 不提供“局部覆盖”能力，它只是批量匹配的快捷写法。
