新的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 相关文章推荐
HTML5 CSS3给网站设计带来出色效果
Jul 16 HTML / CSS
CSS3文本换行word-wrap解决英文文本超过固定宽度不换行
Oct 10 HTML / CSS
CSS3 Media Queries详细介绍和使用实例
May 08 HTML / CSS
几个CSS3的flex弹性盒模型布局的简单例子演示
May 12 HTML / CSS
纯CSS3实现扇形动画菜单(简化版)实例源码
Jan 17 HTML / CSS
css3中仿放大镜效果的几种方式原理解析
Dec 03 HTML / CSS
详解HTML5中垂直上下居中的解决方案
Dec 20 HTML / CSS
HTML5 通信API 跨域门槛将不再高、数据推送也不再是梦
Apr 25 HTML / CSS
Html5实现iPhone开机界面示例代码
Jun 30 HTML / CSS
Html5无刷新修改browser Url的方法
Jan 15 HTML / CSS
web字体加载方案优化小结
Nov 29 HTML / CSS
HTML5+CSS+JavaScript实现捉虫小游戏设计和实现
Oct 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
人族 Terran 基本策略
2020/03/14 星际争霸
一个用mysql_odbc和php写的serach数据库程序
2006/10/09 PHP
php网上商城购物车设计代码分享
2012/02/15 PHP
一致性哈希算法以及其PHP实现详细解析
2013/08/24 PHP
Win2003+apache+PHP+SqlServer2008 配置生产环境
2014/07/29 PHP
ThinkPHP框架使用redirect实现页面重定向的方法实例分析
2018/04/12 PHP
为Plesk PHP7启用Oracle OCI8扩展方法总结
2019/03/29 PHP
jQuery ui 1.7更新小结
2009/08/15 Javascript
jQuery一步一步实现跨浏览器的可编辑表格,支持IE、Firefox、Safari、Chrome、Opera
2009/08/28 Javascript
firefox和IE系列的相关区别整理 以备后用
2009/12/28 Javascript
使用jQuery解决IE与FireFox下createElement方法的差异
2013/11/14 Javascript
事件委托与阻止冒泡阻止其父元素事件触发
2014/09/02 Javascript
jQuery实现自定义下拉列表
2015/01/05 Javascript
跟我学习javascript的Date对象
2015/11/19 Javascript
微信jssdk在iframe页面失效问题的解决措施
2016/03/03 Javascript
网站申请不到支付宝接口、微信接口,免接口收款实现方式几种解决办法
2016/12/14 Javascript
JavaScript 中的12种循环遍历方法【总结】
2018/05/31 Javascript
vue实现自定义多选与单选的答题功能
2018/07/05 Javascript
JS实现十分钟倒计时代码实例
2018/10/18 Javascript
微信小程序实现卡片左右滑动效果的示例代码
2019/05/01 Javascript
使用原生js编写一个简单的框选功能方法
2019/05/13 Javascript
初试vue-cli使用HBuilderx打包app的坑
2019/07/17 Javascript
webpack proxy 使用(代理的使用)
2020/01/10 Javascript
windows下create-react-app 升级至3.3.1版本踩坑记
2020/02/17 Javascript
[47:48]DOTA2上海特级锦标赛D组小组赛#2 Liquid VS VP第三局
2016/02/28 DOTA
[06:43]2018DOTA2国际邀请赛寻真——VGJ.Thunder
2018/08/11 DOTA
浅谈python内置变量-reversed(seq)
2017/06/21 Python
R vs. Python 数据分析中谁与争锋?
2017/10/18 Python
Python使用一行代码获取上个月是几月
2018/08/30 Python
Python 从相对路径下import的方法
2018/12/04 Python
Numpy 多维数据数组的实现
2020/06/18 Python
什么是Linux虚拟文件系统VFS
2012/01/31 面试题
美术指导求职信
2014/03/17 职场文书
美丽乡村建设实施方案
2014/03/23 职场文书
成绩报告单家长评语
2014/12/30 职场文书
CSS 使用 resize 实现图片拖拽切换预览功能(强大功能)
2021/08/23 HTML / CSS