你不知道的 CSS你写的 CSS 太过冗余,以至于我对它下手了
:is()
你是否曾经写过下方这样冗余的CSS选择器:
.active a,
.active button,
.active label {
color: steelblue;
}
其实上面这段代码可以这样写:
.active :is(a, button, label) {
color: steelblue;
}
看~是不是简洁了很多!
是的,你可以使用 :is()
对选择器的任何部分进行分组,例如,你可以对如下代码:
.section h2,
.aside h2,
.nav h2 {
color: steelblue;
}
进行转换:
:is(.section, .aside, .nav) h2 {
color: steelblue;
}
但是 :is()
不仅对父选择器和子选择器有用,它也可以选择多个相邻的选择器,比如:
button:is(:focus, :hover, :active) {
color: steelblue;
}
button:is(.active, .pressed) {
color: lightsteelblue;
}
上述代码等价于:
button:focus, button:hover, button:active {
color: steelblue;
}
button.active, button.pressed {
color: lightsteelblue;
}
:where()
:where()
是一个与 :is()
非常相似的伪类,也值得注意。它们看起来非常相似:
:where(.section, .aside, .nav) h2 {
color: steelblue;
}
但区别在于 :where
的权重为 0,而:is()
总是会采用列表中最特高的选择器的权重。例如,你知道下面的 CSS 代码中的按钮是什么颜色吗?
:is(html) button {
color: red;
}
:where(html) button {
color: blue;
}
在上面的例子中,虽然以 :where()
开头的块在以 :is()
开头的块下面,但 :is()
块具有更高的权重。
:has()
一个相关但非常不同的伪类是:has()
。:has()
允许选择包含匹配选择器(或选择器集)的子元素的父元素。
:has()
的一个示例是不显示下划线的情况下包含图像或视频的链接:
a { text-decoration: underline }
/* 链接有下划线,除非它们包含图像或视频 */
a:has(img, video) {
text-decoration: none;
}
现在,如果默认情况下我们的 a
标记有下划线文本,但其中有图像或视频,则任何匹配的锚元素的下划线将被删除。
你也可以结合 :is()
使用:
:is(a, button):has(img, video) {
text-decoration: none;
}
我们还需要预处理器吗?
现在你可能会说“SCSS可以做到这一点!,你甚至可能更喜欢它的语法:
.active {
button, label, a {
color: steelblue;
}
}
说的没错,这很优雅。但是,CSS 似乎现在已经都能获取到我们曾经需要SCSS(或其他预处理器)才能获得的特性。
CSS 变量也是 CSS 本身的另一个不可思议的补充,它回避了一个问题:就是什么时候或者多久你真的需要预处理程序:
.active :is(a, button, label) {
--color: steelblue;
color: var(--steelblue);
}
这并不是说预处理器没有它们的用例和优点。
但我认为在某个时间点上,它们确实是处理任何重要CSS的强制要求,而现在情况不再如此了。
最后一个惊喜
我想说的是,CSS的未来仍然是光明的。CSS 工作组正积极致力于直接向CSS中添加嵌套选择器。他们正在积极地在3种可能的语法之间进行选择:
/* 1 */
article {
font-family: avenir;
& aside {
font-size: 1rem;
}
}
/* 2 */
article {
font-family: avenir;
} {
aside {
font-size: 1rem;
}
}
/* 3 */
@nest article {
& {
font-family: avenir;
}
aside {
font-size: 1rem;
}
}
你最喜欢哪一个?
其实第 1 种已经被官方采纳!所以我们可能很快就会看到一个非常像 scss 的嵌套语法。
浏览器支持
目前所有主流浏览器都支持 :is()
和 :where()
伪类:
但是,需要注意,我们在这里提到的 :has()
伪类没有相同级别的支持,所以使用 :has()
时要小心:
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanhekheec
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
怎样阻止微信小程序自动打开
PHP中文网 06-13 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01