新的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 三维变形实现立体方块特效源码
Dec 15 HTML / CSS
10 套华丽的CSS3 按钮小结
Oct 03 HTML / CSS
CSS3 icon font完全指南(CSS3 font 会取代icon图标)
Jan 06 HTML / CSS
CSS3制作ajax loader icon实现思路及代码
Aug 25 HTML / CSS
细说CSS3中box属性中的overflow-x属性和overflow-y属性值的效果
Jul 21 HTML / CSS
CSS3中设置3D变形的transform-style属性详解
May 23 HTML / CSS
CSS3中的Media Queries学习笔记
May 23 HTML / CSS
让IE9以下版本的浏览器兼容HTML5的方法
Mar 12 HTML / CSS
详解HTML5中的picture元素响应式处理图片
Jan 03 HTML / CSS
使用canvas一步步实现图片打码功能的方法
Jun 17 HTML / CSS
鼠标滚轮事件和Mac触控板双指事件
Dec 23 HTML / CSS
HTML5拖放API实现自动生成相框功能
Apr 07 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.MVC的模板标签系统(三)
2006/09/05 PHP
PHP 基于文件头的文件类型验证类函数
2012/05/01 PHP
PHP生成短网址的3种方法代码实例
2014/07/08 PHP
PhpStorm terminal无法输入命令的解决方法
2016/10/09 PHP
PHP使用curl_multi_select解决curl_multi网页假死问题的方法
2018/08/15 PHP
Laravel框架实现的rbac权限管理操作示例
2019/01/16 PHP
thinkphp5框架API token身份验证功能示例
2019/05/21 PHP
TP5多入口设置实例讲解
2020/12/15 PHP
InnerHtml和InnerText的区别分析
2009/03/13 Javascript
JavaScript基础语法让人疑惑的地方小结
2012/05/23 Javascript
JS模拟酷狗音乐播放器收缩折叠关闭效果代码
2015/10/29 Javascript
angularjs中判断ng-repeat是否迭代完的实例
2018/09/12 Javascript
自己动手封装一个React Native多级联动
2018/09/19 Javascript
详解Vue改变数组中对象的属性不重新渲染View的解决方案
2018/09/21 Javascript
javascript网页随机点名实现过程解析
2019/10/15 Javascript
原生js实现下拉选项卡
2019/11/27 Javascript
Vue微信公众号网页分享的示例代码
2020/05/28 Javascript
vue实践---vue不依赖外部资源实现简单多语操作
2020/09/21 Javascript
JavaScript中layim之整合右键菜单的示例代码
2021/02/06 Javascript
python实现网页链接提取的方法分享
2014/02/25 Python
神经网络python源码分享
2017/12/15 Python
对python 各种删除文件失败的处理方式分享
2018/04/24 Python
对pyqt5中QTabWidget的相关操作详解
2019/06/21 Python
python3 常见解密加密算法实例分析【base64、MD5等】
2019/12/19 Python
Jupyter notebook无法导入第三方模块的解决方式
2020/04/15 Python
python用什么编辑器进行项目开发
2020/06/17 Python
用Python开发app后端有优势吗
2020/06/29 Python
使用CSS3 制作一个material-design 风格登录界面实例
2016/12/12 HTML / CSS
高校生生产实习自我鉴定
2013/09/21 职场文书
婚礼证婚人证婚词
2014/01/13 职场文书
我的中国心演讲稿
2014/09/04 职场文书
技术股东合作协议书
2014/12/02 职场文书
消防验收申请报告
2015/05/15 职场文书
公共场所卫生管理制度
2015/08/05 职场文书
民事调解协议书
2016/03/21 职场文书
Mysql数据库表中为什么有索引却没有提高查询速度
2022/02/24 MySQL