| CSS 新选择器 :is() :where() :has() | 您所在的位置：网站首页 › have和has什么区别 › CSS 新选择器 :is() :where() :has() |
CSS 新选择器 :is() :where() :has()
|
我报名参加金石计划1期挑战——瓜分10万奖池，这是我的第11篇文章，点击查看活动详情 :is()匹配列表中任意一个选择器可以选择的元素。:matches() 重命名之后的写法。兼容写法：:-webkit-any()、:-moz-any()。 语法 :is( ) /* 设置 header, main, footer 里的任意一个 p 标签的 hover 状态 */ header p:hover, main p:hover, footer p:hover { /* … */ } /* 可以使用 :is() 简写为以下 */ :is(header, main, footer) p:hover { /* … */ } :is() 伪类函数不能选择伪元素 some-element::before, some-element::after { /* … */ }不能使用 :is() 简写： some-element:is(::before, ::after) { /* … */ } forgiving-selector原谅选择器解析可以避免选择器列表失效。在 CSS 中使用选择器列表时，如果任何选择器无效，则整个列表都被视为无效。而当使用 :is() 或 :where() 选择器列表时，如果一个选择器解析失败，则将忽略不正确或不受支持的选择器并使用其他选择器。下面代码即使在浏览器不支持 :unsupported 时，仍然会正确解析并匹配 :valid。 :is(:valid, :unsupported) { /* … */ }下面代码在浏览器不支持 :unsupported 时将被忽略，即使它们支持 :valid。 :valid, :unsupported { /* … */ } :where()与 :is() 语法和作用相同，区别是 :where() 的优先级总是为 0 ，:is() 的优先级是由它的选择器列表中优先级最高的选择器决定的。 示例在下面这个例子中，我们有两篇文章，每篇文章都包含一个部分、一个旁白和一个页脚。然后定义了不同的样式： :is(section.is-styling, aside.is-styling, footer.is-styling) a { color: red; } :where(section.where-styling, aside.where-styling, footer.where-styling) a { color: orange; }如果我们稍后想使用简单的选择器覆盖页脚中链接的颜色： footer a { color: blue; }因为类选择器比元素选择器具有更高的优先级，:is() 的优先级是由它的选择器列表中优先级最高的选择器决定的，所以这不会对 :is() 选择器中页脚链接的样式覆盖。但是，:where() 选择器的优先级总是为 0，因此 :where() 选择器中页脚链接的样式将被覆盖。
匹配包含（相对于 selector 的 :scope）指定选择器的元素。可以认为 selector 的前面有一个看不见的 :scope 伪类（a:has(a > img)这样的写法是不合法的）。它的强大之处是，可以实现父选择器和前面兄弟选择器的功能。支持所有的 CSS 选择符。 语法 :has( ) /* 只要 元素里面有元素的 元素： */ h1:has(+ p) { /* … */ } /* 只要 元素内有 元素或者有 元素就会匹配 */ article:has(h5, p) { /* … */ } /* 元素内同时有 元素和 元素才匹配 */ article:has(h5):has(p) { /* … */ } 示例
需要升级你的浏览器到以下版本： |
【本文地址】