新的CSS 伪类函数 :is() 和 :where()示例详解


Posted in HTML / CSS onAugust 05, 2022

在编写 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()示例详解

到此这篇关于新的CSS 伪类函数 :is() 和 :where()示例详解的文章就介绍到这了,更多相关CSS 伪类函数内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

 
HTML / CSS 相关文章推荐
CSS3轻松实现圆角效果
Nov 09 HTML / CSS
css3过渡_动力节点Java学院整理
Jul 11 HTML / CSS
CSS3悬停效果案例应用
Nov 21 HTML / CSS
CSS3 Columns分列式布局方法简介
May 03 HTML / CSS
H5仿微信界面教程(一)
Jul 05 HTML / CSS
使用javascript和HTML5 Canvas画的四渐变色播放按钮效果
Apr 10 HTML / CSS
HTML5不支持frameset的两种解决方法
Nov 14 HTML / CSS
HTML5拖拽API经典实例详解
Apr 20 HTML / CSS
canvas学习和滤镜实现代码
Aug 22 HTML / CSS
html5中audio支持音频格式的解决方法
Aug 24 HTML / CSS
H5 video poster属性设置视频封面的方法
May 25 HTML / CSS
CSS几步实现赛博朋克2077风格视觉效果
Jun 16 HTML / CSS
前端使用svg图片改色实现示例
Jul 23 #HTML / CSS
详解flex:1什么意思
Jul 23 #HTML / CSS
CSS子盒子水平和垂直居中的五种方法
Jul 23 #HTML / CSS
如何用H5实现好玩的2048小游戏
Jul 23 #HTML / CSS
css让页脚保持在底部位置的四种方案
Jul 23 #HTML / CSS
浅谈为什么我的 z-index 又不生效了
Jul 15 #HTML / CSS
纯CSS实现一个简单步骤条的示例代码
Jul 15 #HTML / CSS
You might like
php页面跳转代码 输入网址跳转到你定义的页面
2013/03/28 PHP
MongoDB在PHP中的常用操作小结
2014/02/20 PHP
PHP数组操作――获取数组最后一个值的方法
2015/04/14 PHP
详解PHP实现定时任务的五种方法
2016/07/25 PHP
php计数排序算法的实现代码(附四个实例代码)
2020/03/31 PHP
对xmlHttp对象方法和属性的理解
2011/01/17 Javascript
超级有用的13个基于jQuery的内容滚动插件和教程
2011/07/31 Javascript
基于Jquery+Ajax+Json的高效分页实现代码
2011/10/29 Javascript
node.js中的console.log方法使用说明
2014/12/09 Javascript
jquery+javascript编写国籍控件
2015/02/12 Javascript
jquery+ajax实现直接提交表单实例分析
2016/06/17 Javascript
BootStrap 导航条实例代码
2017/05/18 Javascript
Angular2.0/4.0 使用Echarts图表的示例代码
2017/12/07 Javascript
详解vue-cli项目中怎么使用mock数据
2018/05/29 Javascript
Nodejs异步回调之异常处理实例分析
2018/06/22 NodeJs
对vue中v-on绑定自定事件的实例讲解
2018/09/06 Javascript
JavaScript中十种一步拷贝数组的方法实例详解
2019/04/22 Javascript
vue自定义表单生成器form-create使用详解
2019/07/19 Javascript
VUE DEMO之模拟登录个人中心页面之间数据传值实例
2019/10/31 Javascript
vue 实现强制类型转换 数字类型转为字符串
2019/11/07 Javascript
Vue+Vant 图片上传加显示的案例
2020/11/03 Javascript
python使用os模块的os.walk遍历文件夹示例
2014/01/27 Python
python通过pil将图片转换成黑白效果的方法
2015/03/16 Python
python 集合 并集、交集 Series list set 转换的实例
2018/05/29 Python
在pycharm中python切换解释器失败的解决方法
2018/10/29 Python
Tensorflow 卷积的梯度反向传播过程
2020/02/10 Python
Keras 中Leaky ReLU等高级激活函数的用法
2020/07/05 Python
非凡女性奢华谦虚风格:The Modist
2017/10/28 全球购物
菲律宾购物网站:Lazada菲律宾
2018/04/05 全球购物
UNIONBAY官网:美国青少年服装品牌
2019/03/26 全球购物
什么是虚拟内存?虚拟内存有什么优势?
2012/02/19 面试题
什么是SCM(软件配置管理)
2014/08/16 面试题
幼儿园毕业典礼主持词
2014/03/21 职场文书
企业金融服务方案
2014/06/03 职场文书
孝敬父母的活动方案
2014/08/31 职场文书
Win11 BitLocker 驱动器加密
2022/04/19 数码科技