沙利文 Sullivan
Current Location:Home > 最近帖子 > 前端
当前位置:网站首页 > 最近帖子 > 前端

CSS native nested syntax capability boundary

CSS 原生嵌套语法能力边界

  • 超级管理员
  • 2024-04-15 17:51:50

支持嵌套,并且支持多层嵌套

这个很好理解,直接看 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 原生的嵌套功能相当强大,基本是传统预处理器的平替。使用嵌套规则的好处在于:

  1. 更加易读和易维护,嵌套帮助我们编写更易于维护的 CSS,基于嵌套,我们可以更好的控制样式的作用域

  2. 更少的代码,嵌套帮助我们编写更少的代码,因为我们不需要一遍又一遍地重复父选择器

随着兼容性的铺开,慢慢地,我们可以尝试真正运用它们到实际代码中。