这篇文章给大家介绍了“CSS伪类函数is()和where()如何使用，有什么差异”的相关知识，讲解详细，步骤过程清晰，有一定的借鉴学习价值，因此分享给大家做个参考，感兴趣的朋友接下来一起跟随小编看看吧。

在编写 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;
}

可以放在选择器之后

    article :is(.header,.footer) > b {
      color: gray;
    }

相当于：

    article .header b, article .footer b {
      color: gray;
    }

可以组合使用：

    :is(h1,h6):is(.header,.footer) > b {
      color: blue;
    }

相当于

    h1.header > b,  h1.footer > b, h6.header > b,  h6.footer > b {
      color: blue;
    }

:where() 函数 和 :is()函数功能一样，不过:is()权重比:where()权重高

    :is(h1,h2,h3,h4,h5,h6) > b { /* :is 生效 */
      color: hotpink;
    }
    :where(h1,h2,h3,h4,h5,h6) > b {
      color: red;
    }

上述内容具有一定的借鉴价值，感兴趣的朋友可以参考，希望能对大家有帮助，想要了解更多"CSS伪类函数is()和where()如何使用，有什么差异"的内容，大家可以关注群英网络的其它相关文章。

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

猜你喜欢

• CSS3怎样做图片横向无限滚动的效果，实现要点是什么

  这篇文章主要介绍了纯css3实现横向无限滚动的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

• flex布局和fixed有冲突怎么办？如何解决？

  flex布局和fixed有冲突怎么办？对于flex布局与position:absolute/fixed的冲突问题相信不少朋友都有踩过这个坑，对此，这篇文章就与大家一起探讨一下怎样解决flex布局和fixed/position:absolute有冲突的问题。

• CSS中为什么要有层叠机制，可以解决什么问题

  这篇文章主要介绍了浅谈CSS层叠机制的相关资料,层叠机制可以解决作者（写代码的人），用户（浏览页面的人）和用户代理（一般指浏览器）的样式冲突,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

• 用CSS怎么实现实现立体摆放效果，思路是怎样的

  这篇文章主要介绍了纯css实现立体摆放图片效果的实例代码,需要的朋友可以参考下

• H5网络存储方式有几种，有何特点和优势

  传统方式使用document.cookie来进行存储，但是由于其存储的空间只有4KB左右，并且需要复杂的操作进行解析，给发开者带来很多不便，为此，HTML5规范提出了网络存储的解决方案，本文通过实例代码给大家详细介绍，感兴趣的朋友一起看看吧