很早之前,就写过一篇与原生嵌套相干的文章 — CSS 行将反对嵌套,SASS/LESS 等预处理器已无用武之地?,彼时 CSS 原生嵌套还处于工作草案 Working Draft (WD) 阶段,而明天(2023-09-02),CSS 原生嵌套 Nesting 终于成为了既定的标准!
CSS 原生嵌套语法
在之前,只有在 LESS、SASS 等预处理器中,咱们能力应用嵌套的写法,像是这样:
div {
& > p {color: red;}
&:hover {color: yellow;}
}
从 Chrome 112 开始,原生 CSS 也能够应用嵌套语法了。
其语法规定大抵如下:
parentRule {
/* parent rule style properties */
& childRule {/* child rule style properties */}
}
CSS 原生嵌套语法能力边界
大部分同学对嵌套应该还是十分相熟的,上面咱们一起看看,CSS 原生嵌套的能力边界,语法反对范畴。
反对嵌套,并且反对多层嵌套
这个很好了解,间接看 DEMO:
<div class="g-container">
<h3 class="g-h3">CSS
<span class="g-span">Nesting</span>
</h3>
</div>
div {
border: 1px solid #000;
.g-h3 {
color: red;
.g-span {color: blue;}
}
}
成果如下:
当然,这里有个值得注意的点。如果咱们不应用具体的 ClassName,而是应用 标签名称选择器,像是这样:
div {
border: 1px solid #000;
h3 {
color: red;
span {color: blue;}
}
}
嵌套规定是不会失效的,此时,咱们须要在 标签名称选择器 前,加上 &
合乎:
div {
border: 1px solid #000;
& h3 {
color: red;
& span {color: blue;}
}
}
与 SASS 等相似,&
符号在嵌套中,也示意嵌套的父选择器自身,因而,下面两个嵌套选择器最终的表达式实则为:
div h3 {color: red}
;div h3 span {color blue}
;
在嵌套中应用伪元素和伪类
间接上代码,这个也是传统 CSS 预处理器反对的内容:
div {
/* ... */
&:hover {color: red;}
&:is(.content, footer) {padding: 16px;}
&::before {
content: "";
/* ... */
}
}
上述代码中,咱们可能在嵌套中应用伪类、伪元素。
在嵌套中应用媒体查问
这个就比拟有意思了,咱们甚至能够在嵌套中,应用媒体查问语法。
<div class="g-container">
<h3>CSS Nesting without @media</h3>
</div>
<div class="g-container media">
<h3>CSS Nesting with @media</h3>
</div>
.media {@media (min-width: 600px) {
& h3 {color: red;}
}
}
此时,下方带有 .media
class 的容器,在视口宽度大于 600px
的时候,设置 color: red
。
成果如下:
残缺的 DEMO,你能够戳这里试一下:CodePen Demo — CSS Nesting Demo
在嵌套中嵌套本身
哈?什么是 在嵌套中嵌套本身?
其实也很好了解,也就是 &
符号的时候,下面提到了,&
符号在嵌套中,也示意嵌套的父选择器自身,因而,咱们还能够有这样的写法:
div {
& h2 & {/* 示意 div h2 div {} */
}
}
这种写法也是容许的,咱们只须要将 &
替换成 div
即可,此时示意 div h2 div {}
。
总结一下
总结而言,CSS 原生的嵌套性能相当弱小,根本是传统预处理器的平替。应用嵌套规定的益处在于:
- 更加易读和易保护,嵌套帮忙咱们编写更易于保护的 CSS,基于嵌套,咱们能够更好的管制款式的作用域
- 更少的代码,嵌套帮忙咱们编写更少的代码,因为咱们不须要一遍又一遍地反复父选择器
随着兼容性的铺开,缓缓地,咱们能够尝试真正使用它们到理论代码中。
最初
好了,本文到此结束,心愿对你有帮忙 :)
更多精彩 CSS 技术文章汇总在我的 Github — iCSS,继续更新,欢送点个 star 订阅珍藏。
如果还有什么疑难或者倡议,能够多多交换,原创文章,文笔无限,满腹经纶,文中若有不正之处,万望告知。