当前位置:网站首页 > 最近帖子 > 前端
CSS native nested syntax capability boundary
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; } } }
效果如下:
总结一下
总结而言,CSS 原生的嵌套功能相当强大,基本是传统预处理器的平替。使用嵌套规则的好处在于:
更加易读和易维护,嵌套帮助我们编写更易于维护的 CSS,基于嵌套,我们可以更好的控制样式的作用域
更少的代码,嵌套帮助我们编写更少的代码,因为我们不需要一遍又一遍地重复父选择器
随着兼容性的铺开,慢慢地,我们可以尝试真正运用它们到实际代码中。