首页 > 其他分享 >CSS 中的 :is() 和 :where() 是什么?它们是相同的还是不同的?

CSS 中的 :is() 和 :where() 是什么?它们是相同的还是不同的?

时间:2022-09-18 16:45:00浏览次数:117  
标签:相同 伪类 列表 where 选择器 CSS 特异性

什么是 :是() 和 :where() 在 CSS 中?它们是相同的还是不同的?

:是() 伪类函数将选择器列表作为其参数,并选择可以由该列表中的选择器之一选择的任何元素。

:is()

以上等价于以下内容,这对于以更紧凑的形式编写大型选择器很有用。

同样的事情可以用 :在哪里() .

CSS 伪类函数 :在哪里() 将选择器列表作为参数,并选择可由该列表中的一个选择器选择的任何元素。

:where()

以上等价于以下,

:where() expand

但是等等,它们看起来都一样。那么有什么区别呢?

不同之处在于 特异性。

在 CSS 中,如果有两个或多个 CSS 规则指向同一个元素,则具有最高特异性值的选择器将“获胜”,其样式声明将应用于该 HTML 元素。

所以基本上,两者都没有 :在哪里() 它里面的任何东西都不是特异性的。其特异性始终为 0。

另一方面,里面的一切 :是() 伪类计算特异性。

那么使用哪一个…………..?

这完全取决于你的目标。您可以使用 :是() 如果要减少选择器重复,则使用伪类。

但是,如果您还想要较低的特异性,那么 :在哪里() 是要走的路!

如果你想编写更简洁的代码,或者你只想每周都有这样的提示,那么你可以在 medium 上关注我将更有可能向你展示下一篇文章。

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明

本文链接:https://www.qanswer.top/37576/28241816

标签:相同,伪类,列表,where,选择器,CSS,特异性
From: https://www.cnblogs.com/amboke/p/16705171.html

相关文章

  • css 基础入门
    目录基础入门CSS语法CSS选择器基础选择器标签选择器类选择器id选择器群选择器全局选择器层级选择器子选择器基础入门前面部分我们知道可以通过直接指定style属性来配置D......
  • 1624. 两个相同字符之间的最长子字符串
    1624.两个相同字符之间的最长子字符串给你一个字符串s,请你返回两个相同字符之间的最长子字符串的长度,计算长度时不含这两个字符。如果不存在这样的子字符串,返回-1......
  • SQL语句中过滤条件放在on、where、having的区别和联系
    摘要:SQL语句中,过滤条件放在不同筛选器on、where和having的区别和联系。综述  在《SQL语句中过滤条件放在on和where子句中的区别和联系》中,介绍了多表关联SQL语句中,过滤......
  • css命名规范
     CSS书写顺序1.位置属性(position,top,right,z-index,display,float等)2.大小(width,height,padding,margin)3.文字系列(font,line-height,letter......
  • 纯html+css 实现滚动新闻
    CSS3实现滚动字幕效果(即跑马灯)参考 https://www.cnblogs.com/h5n1/archive/2012/03/03/2378397.html -本周亮点-本周图书国庆特大书讯我们虚位以待你准......
  • react和vue这两个框架的相同点和不同点?
    相同点:1.都支持服务器端渲染2.都有virtualdom,组件化开发,通过props参数进行父子组件传值,都实现webComponent规范数据3.数据驱动视图4.都有支持native的方案,react的是r......
  • 【css3】选择器 :nth-of-type(n)和:nth-child(n) 的区别
          参考:https://blog.csdn.net/dangbai01_/article/details/88545350?spm=1001.2101.3001.6650.3&utm_medium=distribute.pc_relevant.none-task-blog-2%7E......
  • css banner图片居中
    第一种写法:.bannerBox{ width:100%; height:310px; background:url(../../assets/img/Admin.png)no-repeat; background-size:cover; background-p......
  • 直播平台源代码,uniapp中样式的学习及如何使用scss和字体图标
    直播平台源代码,uniapp中样式的学习及如何使用scss和字体图标uni-app中的样式rpx即响应式px,一种根据屏幕自适应动态单位。以750宽的屏幕为基准,750rpx恰好为屏幕宽度。屏......
  • 如何设置您的第一个 Tailwind CSS 项目
    如何设置您的第一个TailwindCSS项目与任何其他CSS框架不同,TailwindCSS没有固执己见,它允许您为任何项目创建组件和设计元素。它不是唯一实用程序优先的CSS框架,但......