听说没，Chrome和Edge要在109版本开始支持CSS嵌套，这个更新刚出来就备受关注哟。现在已经有Chrome 109和Safari的技术预览版跟进了，CSS嵌套看起来用着挺好滴～别聊那么多，咱们赶快看看怎么操作和这个改进带来的影响！
1. CSS嵌套语法的背景
说到网页设计里最重要的环节——前端开发，你绝对不能错过CSS这位大神。它能让网站美美的还特好记！以前写CSS老麻烦了，老是搞些重复又冗长的代码，看起来就闹心。不过幸亏有CSS预处理器（例如Sass、Less啥的）出来帮咱们分担压力。更惊喜的是，Google的Chrome和Microsoft的Edge浏览器现在都直接支持CSS嵌套了，这下编程序就容易多了，错误率也降低了不少！
之前我们编写css，得靠那个名叫Sass的工具才能搞定，简称好像是SSS。有了它，就能在css选择器中嵌套各种属性，写代码会简单很多。告诉您个好消息，Chrome升级到了109版本，Safari也发布了162版。现在只需要使用CSS就可以实现这些功能了，和Sass的用法差不多！
2. CSS嵌套语法的基本用法
实际上，把一条 CSS 规则堆在其他规则上，就能让底下那层层规则都能照着上面那些选择器用！这么做的话，咱们的代码不仅变得更有模有样了，管理起来也不那么费劲儿了。比如说，以前咱们可能会写成这样子：
css
.container {
width: 100%;
}
.container .item {
table.colortable td {
text-align:center;
}
table.colortable td.c {
text-transform:uppercase;
}
table.colortable td:first-child, table.colortable td:first-child+td {
border:1px solid black;
}
table.colortable th {
text-align:center;
background:black;
color:white;
}
color:#333;
table.colortable {
& td {
text-align:center;
&.c { text-transform:uppercase }
&:first-child, &:first-child + td { border:1px solid black }
}
& th {
text-align:center;
background:black;
color:white;
}
}
而使用CSS嵌套时，则可以简化为：
.item {
.foo {
color: red;
&:hover {
color: blue;
}
}
/* 相当于: */
.foo { color: red; }
.foo:hover { color: blue; }
color:#333;
.foo {
color: red;
+ .bar {
color: blue;
}
}
/* 相当于: */
.foo { color: red; }
.foo + .bar { color: blue; }
}
终于把那些重复的代码给删看起来规矩多了，这下子CSS文件也好懂了！
div {
color: red;
input {
margin: 1em;
}
}
/* 无效，因为 input 是一个标识符 */
3. CSS嵌套语法进阶应用
其实，光学会那些基础的CSS标签还不够！我们还能通过嵌套规则属性，就像个小侦探一样，找到父级规则里面的所有元素。但是得留心，别只依赖以识别符号（就是类型选择器）打头的嵌套规则，那样可能会有点麻烦～
div {
color: red;
& input { margin: 1em; }
/* 有效，不再以标识符开头 */
:is(input) { margin: 1em; }
/* 有效，以冒号开头，并且等同于之前的规则 */
}
对了，记住用嵌套规则，得首先找到父规则选中的那部分。这里面有个超级好用的”&162cacf0d591b432412c89437dea28e0;”(嵌套选择器)，能帮咱们找出跟父规则对应的元素。当然，如果你熟悉:is()选择器，也能用它弄出”爸爸”级别的样式规则选择器！
4.嵌套选择器与特异性
当您运用嵌套选b择器时候，别忘了看看它们到底牛在哪儿！那个”&162cacf0d591b432412c89437dea28e0;”符号，说白了就是找爸爸！跟那些极其高级特殊性的非嵌套法则差不了多少，但是，用法上可能还是有些区别滴。
例如，在DOM结构为a> b >c时：
#a{
color: red;
&162cacf0d591b432412c89437dea28e0; b {
color: blue;
a, b {
& c { color: blue; }
}
这段Python代码是在告诉我们，那个放在#a后面的&162cacf0d591b432412c89437dea28e0;其实就是指#a这个标签！然后，你还得知道，因为b前面也有个&162cacf0d591b432412c89437dea28e0;，所以它的特长就是[1,0,1]！
5. CSS原生嵌套语法未来展望
:is(a, b) c { color: blue; }
你知道吗？我们现在用的CSS嵌套方式还处于实验阶段，未来可能会有新规则出来决定它最后会怎样。听说Chrome浏览器112版本应该能支持了！但是别急，规范还在搞，文章里的信息也许也会变。
要等更新完浏览器才行，那时候就能用 CSS 嵌套语法做网页设计了。这可会让我们的创意飞起来哟~所以搞开发的朋友们，看看新标准的进展，别落后
.foo, .foo::before, .foo::after {
color: red;
&:hover { color: blue; }
}
6.总结与展望
想学前端的同学们，快来认识下啥叫CSS原生嵌套！这个东西能让咱们少敲很多无意义的重复代码，而且代码还更好理解！听说以后会越来越流行，真的好用到爆！
记住，环境总在变化，咱得跟着节奏走。实际干活时，有啥需求就灵活应对！学习试试，积累点儿经验，这才能做好前端开发的工作。
.foo, .foo::before, .foo::after {
color: red;
}
.foo:hover {
color: blue;
}
。
原文链接：https://www.icz.com/technicalinformation/web/2024/04/12964.html，转载请注明出处~~~ 
评论0