HTML CSS is和where选择器从零开始教程
:is() 这个选择器,本质上是 CSS 的伪类函数。它只能写在 标签内或者外部 CSS 文件中,并不属于 HTML 的范畴。在 HTML 标签上写 并不能让它生效——那是一种错误的用法。 如何正确使用 :is() 避免被浏览器忽略 先看兼容性:现代浏览器(Chrome 100+、Firefox 9
先看兼容性:现代浏览器(Chrome 100+、Firefox 98+、Safari 15.4+)均已原生支持。但有两个细节需要注意,否则可能写了也无效。 两者都接受选择器列表,但行为完全不同。 这个问题比较常见,但两者完全无关。 仅记住语法不够,来看一个实际减少代码量的例子: 这里使用了两层 容易被忽略的是:当需要为 :is() 这个选择器,本质上是 CSS 的伪类函数。它只能写在 标签内或者外部 CSS 文件中,并不属于 HTML 的范畴。在 HTML 标签上写 
如何正确使用
: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(#na v, .sidebar, div[role="banner"]),它也无法压过最普通的 h1 元素选择器。:is() 更适合替代手写逗号分隔的长列表,能保持原有的覆盖力;而 :where() 更适合用于基础重置或默认样式,避免被后续规则意外覆盖。常见误用:将
:is() 当作 jQuery 的 .is() 使用
:is() 是声明式样式匹配,作用于渲染层,没有 JS 运行时开销。.is() 是运行时方法,返回布尔值,用于条件判断,例如 $('div').is('.active')。:is('.active'),期望它检测某个 div 是否包含该类——这毫无意义。CSS 不进行运行时判定,它只按规则匹配所有符合条件的元素。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;
}
/* 改写后:语义清晰,维护点唯一 */
:is(article, section, aside) :is(h1, h2, h3) {
line-height: 1.3;
}
:is(),第一层选择容器,第二层选择标题。相比写成 :is(article h1, article h2, ...) 更易读,也避免了漏掉某一种组合。:is() 中的某个子选择器单独添加样式时(例如只想让 section h2 增加 margin),需要另写一条更高特异性的规则。:is() 不提供“局部覆盖”能力,它只是批量匹配的快捷写法。
