HTML怎么用is选择器_html CSS is和where选择器用法:从零开始

: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() 不提供“局部覆盖”能力，它只是批量匹配的快捷写法。