现代 CSS 解决方案:原生嵌套(Nesting)

很早之前,就写过一篇与原生嵌套相关的文章 -- CSS 即将支持嵌套,SASS/LESS 等预处理器已无用武之地?,彼时 CSS 原生嵌套还处于工作草案 Working Draft (WD) 阶段,而今天(2023-09-02),CSS 原生嵌套 Nesting 终于成为了既定的规范!

CSS 原生嵌套语法

在之前,只有在 LESS、SASS 等预处理器中,我们才能使用嵌套的写法,像是这样:

CSS 复制代码
div {
    & > p {
        color: red;
    }

    &:hover {
        color: yellow;
    }
}

从 Chrome 112 开始,原生 CSS 也可以使用嵌套语法了。

其语法规则大致如下:

CSS 复制代码
parentRule {
  /* parent rule style properties */
  & childRule {
    /* child rule style properties */
  }
}

CSS 原生嵌套语法能力边界

大部分同学对嵌套应该还是非常熟悉的,下面我们一起看看,CSS 原生嵌套的能力边界,语法支持范围。

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

这个很好理解,直接看 DEMO:

HTML 复制代码
<div class="g-container">
    <h3 class="g-h3">CSS 
        <span class="g-span">Nesting</span>
    </h3>
</div>
CSS 复制代码
div {
    border: 1px solid #000;
    
    .g-h3 {
        color: red;
        
        .g-span {
            color: blue;
        }
    }
}

效果如下:

当然,这里有个值得注意的点。如果我们不使用具体的 ClassName,而是使用标签名称选择器,像是这样:

CSS 复制代码
div {
    border: 1px solid #000;
    
    h3 {
        color: red;
        
        span {
            color: blue;
        }
    }
}

嵌套规则是不会生效的,此时,我们需要在标签名称选择器 前,加上 & 符合:

CSS 复制代码
div {
    border: 1px solid #000;
    
    & h3 {
        color: red;
        
        & span {
            color: blue;
        }
    }
}

与 SASS 等类似,& 符号在嵌套中,也表示嵌套的父选择器本身,因此,上面两个嵌套选择器最终的表达式实则为:

  • div h3 { color: red };
  • div h3 span { color blue };

在嵌套中使用伪元素和伪类

直接上代码,这个也是传统 CSS 预处理器支持的内容:

CSS 复制代码
div {
  /* ... */
  &:hover {
    color: red;
  }

  &:is(.content, footer) {
    padding: 16px;
  }

  &::before {
    content: "";
    /* ... */
  }
}

上述代码中,我们能够在嵌套中使用伪类、伪元素。

在嵌套中使用媒体查询

这个就比较有意思了,我们甚至可以在嵌套中,使用媒体查询语法。

HTML 复制代码
<div class="g-container">
    <h3>CSS Nesting without @media</h3>
</div>
<div class="g-container media">
    <h3>CSS Nesting with @media</h3>
</div>
CSS 复制代码
.media {
  @media (min-width: 600px) {
      & h3 {
          color: red;
      }
  }
}

此时,下方带有 .media class 的容器,在视口宽度大于 600px 的时候,设置 color: red

效果如下:

完整的 DEMO,你可以戳这里试一下:CodePen Demo -- CSS Nesting Demo

在嵌套中嵌套自身

哈?什么是在嵌套中嵌套自身

其实也很好理解,也就是 & 符号的时候,上面提到了,& 符号在嵌套中,也表示嵌套的父选择器本身,因此,我们还可以有这样的写法:

CSS 复制代码
div {
    & h2 & {
        /* 表示 div h2 div {} */
    }
}

这种写法也是允许的,我们只需要将 & 替换成 div 即可,此时表示 div h2 div {}

总结一下

总结而言,CSS 原生的嵌套功能相当强大,基本是传统预处理器的平替。使用嵌套规则的好处在于:

  1. 更加易读和易维护,嵌套帮助我们编写更易于维护的 CSS,基于嵌套,我们可以更好的控制样式的作用域
  2. 更少的代码,嵌套帮助我们编写更少的代码,因为我们不需要一遍又一遍地重复父选择器

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

最后

好了,本文到此结束,希望对你有帮助 :)

更多精彩 CSS 技术文章汇总在我的 Github -- iCSS ,持续更新,欢迎点个 star 订阅收藏。

如果还有什么疑问或者建议,可以多多交流,原创文章,文笔有限,才疏学浅,文中若有不正之处,万望告知。

相关推荐
xjt_09012 分钟前
浅析Web存储系统
前端
foxhuli22939 分钟前
禁止ifrmare标签上的文件,实现自动下载功能,并且隐藏工具栏
前端
青皮桔1 小时前
CSS实现百分比水柱图
前端·css
失落的多巴胺1 小时前
使用deepseek制作“喝什么奶茶”随机抽签小网页
javascript·css·css3·html5
DataGear1 小时前
如何在DataGear 5.4.1 中快速制作SQL服务端分页的数据表格看板
javascript·数据库·sql·信息可视化·数据分析·echarts·数据可视化
影子信息1 小时前
vue 前端动态导入文件 import.meta.glob
前端·javascript·vue.js
青阳流月1 小时前
1.vue权衡的艺术
前端·vue.js·开源
样子20181 小时前
Vue3 之dialog弹框简单制作
前端·javascript·vue.js·前端框架·ecmascript
kevin_水滴石穿1 小时前
Vue 中报错 TypeError: crypto$2.getRandomValues is not a function
前端·javascript·vue.js
翻滚吧键盘1 小时前
vue文本插值
javascript·vue.js·ecmascript