美文网首页
CSS 伪类函数 :is() 和 :where()

CSS 伪类函数 :is() 和 :where()

作者: 源大侠 | 来源:发表于2023-05-08 15:14 被阅读0次

在编写 CSS 时,有时可能会使用很长的选择器列表来定位具有相同样式规则的多个元素。例如,如果您想对标题中的 <b> 标签进行颜色调整,我们应该都写过这样的代码:

h1 > b, h2 > b, h3 > b, h4 > b, h5 > b, h6 > b {
  color: hotpink;
}

现在,我们可以使用 :is() 缩减代码并提高其可读性:

:is(h1,h2,h3,h4,h5,h6) > b {
  color: hotpink;
}

浏览器兼容性

:is() 由 :match() 改名而来,部分浏览器有其私有的 :any() 实现 :is() 的部分功能,在使用 :is() 之前,我们应该先了解其兼容性:


image.png

:is() 和 :where()

:is() 作为一个伪类函数,其接收选择器列表作为参数,并选择该列表中任意一个选择器可以选择的元素,:where() 伪类函数与其功能相同,仅仅选择器权重不同,下面是几个例子:

/* at the beginning */
:where(h1,h2,h3,h4,h5,h6) > b {
  color: hotpink;
}

/* in the middle */
article :is(header,footer) > p {
  color: gray;
}

/* at the end */
.dark-theme :where(button,a) {
  color: rebeccapurple;
}

/* multiple */
:is(.dark-theme, .dim-theme) :where(button,a) {
  color: rebeccapurple;
}

/* stacked */
:is(h1,h2):where(.hero,.subtitle) {
  text-transform: uppercase;
}

/* nested */
.hero:is(h1,h2,:is(.header,.boldest)) {
  font-weight: 900;
}

相关文章

  • JQuery CSS选择器

    CSS普通选择器 选择器函数 CSS伪类选择器

  • css伪类(Pseudo-classes) & after be

    anchor伪类 Eg: 伪类和CSS类 伪类可以与 CSS 类配合使用: 在一个节点前后加节点

  • part2: CSS基础-练习

    CSS全称: cascading style sheets 谈谈css伪类与伪元素 这是我见过最全的伪类和伪元素总...

  • 伪元素&伪类

    css引入伪类和伪元素概念是为了格式化文档树以外的信息。 伪元素&伪类: css引入伪类和伪元素概念是为了格式化文...

  • 伪元素&伪类

    css引入伪类和伪元素概念是为了格式化文档树以外的信息。 伪元素&伪类:css引入伪类和伪元素概念是为了格式化文档...

  • 伪元素和伪类

    一、伪类 1.1 定义 css伪类:css伪类用于向某些选择器添加特殊效果。 伪类其实与普通的css类相类似,可以...

  • 伪元素和伪类问题

    1.单冒号(:)用于CSS3伪类,双冒号(::)用于CSS3伪元素。2.css2伪类和伪元素都是用单引号,所有的浏...

  • 【CSS】选择器

    CSS选择器|菜鸟教程 伪类&伪元素 在CSS1和CSS2中对伪类和伪选择器没有做出很明显的区别定义,而二者在语法...

  • css伪元素

    css 伪元素 详述: 这篇文章是继 css的伪类 与 css 伪类选择器 后的 CSS伪元素总结, 意在总结连贯...

  • CSS-伪类的分类

    一、伪类的分类: 状态伪类和结构性伪类 二、目录和代码 index.html index.css

网友评论

      本文标题:CSS 伪类函数 :is() 和 :where()

      本文链接:https://www.haomeiwen.com/subject/tbdlsdtx.html