新的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 24 HTML / CSS
CSS图片翻转动画技术详解(IE也实现了)
Apr 03 HTML / CSS
纯CSS实现右侧底部悬浮效果(悬浮QQ、微信、微博、邮箱等联系方式)
Apr 24 HTML / CSS
详解css3中的伪类before和after常见用法
Nov 17 HTML / CSS
HTML5 Canvas绘制文本及图片的基础教程
Mar 14 HTML / CSS
HTML5实现分享到微信好友朋友圈QQ好友QQ空间微博二维码功能
Jan 03 HTML / CSS
html5实现完美兼容各大浏览器的播放器
Dec 26 HTML / CSS
详解HTML5 data-* 自定义属性
Jan 24 HTML / CSS
Html5 页面适配iPhoneX(就是那么简单)
Sep 05 HTML / CSS
html5 横向滑动导航栏的方法示例
May 08 HTML / CSS
使用css样式设计一个简单的html登陆界面的实现
Mar 30 HTML / CSS
HTML+CSS 实现顶部导航栏菜单制作
Jun 03 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/02/03 PHP
详解 PHP加密解密字符串函数附源码下载
2015/12/18 PHP
PHP实现163邮箱自动发送邮件
2016/03/29 PHP
PHP实现大数(浮点数)取余的方法
2017/02/18 PHP
ThinkPHP5.1框架数据库链接和增删改查操作示例
2019/08/03 PHP
PHP $O00OO0=urldecode & eval 解密,记一次商业源码的去后门
2020/09/13 PHP
在一个js文件里远程调用jquery.js会在ie8下的一个奇怪问题
2010/11/28 Javascript
JavaScript学习笔记之获取当前目录的实现代码
2010/12/14 Javascript
javascript表单验证 - Parsley.js使用和配置
2013/01/25 Javascript
自动最大化窗口的Javascript代码
2013/05/22 Javascript
jquery鼠标滑过提示title具体实现代码
2013/08/06 Javascript
JS禁用浏览器退格键实现思路及代码
2013/10/29 Javascript
javascript与cookie 的问题详解
2013/11/11 Javascript
再谈Jquery Ajax方法传递到action(补充)
2014/05/12 Javascript
javascript获取checkbox复选框获取选中的选项
2014/08/12 Javascript
jQuery中 attr() 方法使用小结
2015/05/03 Javascript
javascript最基本的函数汇总
2015/06/25 Javascript
Css3制作变形与动画效果
2015/07/24 Javascript
jquery动态增加删减表格行特效
2015/11/20 Javascript
Ext JS框架中日期函数的用法及日期选择控件的实现
2016/05/21 Javascript
jQuery实现鼠标经过时高亮,同时其他同级元素变暗的效果
2016/09/18 Javascript
第一次接触神奇的Bootstrap
2016/10/14 Javascript
Angularjs实现搜索关键字高亮显示效果
2017/01/17 Javascript
Angularjs的启动过程分析
2017/07/18 Javascript
JS鼠标3次点击事件实现代码及扩展思路
2017/09/12 Javascript
vue slot 在子组件中显示父组件传递的模板
2018/03/02 Javascript
vue2.0 axios跨域并渲染的问题解决方法
2018/03/08 Javascript
详解Angular-ui-BootStrap组件的解释以及使用
2018/07/13 Javascript
python查看zip包中文件及大小的方法
2015/07/09 Python
意大利时尚精品店:Nugnes 1920
2020/02/10 全球购物
九年级化学教学反思
2014/01/28 职场文书
乡镇干部个人对照检查材料(群众路线)
2014/09/26 职场文书
高考百日冲刺决心书
2015/09/23 职场文书
党风廉政建设心得体会
2019/05/21 职场文书
分享一些Java的常用工具
2021/06/11 Java/Android
ajax请求前端跨域问题原因及解决方案
2021/10/16 Javascript