CSS 原生嵌套语法来了!

简介: CSS 原生嵌套语法来了!

大家好,我是 CUGGZ。

最近在查看 caniuse.com 时发现,Chrome 和 Edge 浏览器将在 109 版本实验性支持 CSS 原生嵌套语法。

1.webp.jpg

1 月 10 日,Chrome 109 发布;1 月 26 日,Safari 技术预览版 162 发布,这两个浏览器版本都带来了 CSS 嵌套的实验性支持。Chrome 官方指出,添加将 CSS 样式规则嵌套在其他样式规则中的功能,将来自外部的选择器与内部规则相结合,以提高样式表的模块化和可维护性。2.webp.jpg3.webp.jpg

目前,CSS 原生嵌套语法处于开发者试用状态,CSS 工作组正在制定相关规范(尚未完成),Chrome 浏览器预计将于 112 版本正式推出 CSS 原生嵌套功能。

下面就来看看 CSS 嵌套模块是如何使用的!


基本概念


所谓的嵌套,就是将一个 CSS 规则放在另一个(嵌套规则)中,子规则的选择器将相对于父规则的选择器。这有利于代码的模块化和可维护性。原来只能在 CSS 预处理器中使用的嵌套功能,先在可以在原生 CSS 中使用。

其实,CSS 嵌套和 Sass 的嵌套类似,比如,对于以下 CSS 样式:

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;
}

如果使用 CSS 嵌套时,就是这样的:

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 的可读性和可维护性。

嵌套规则

嵌套规则可以使用嵌套选择器(&) 直接引用父规则的匹配元素,或者使用相对选择器语法指定“后代”以外的关系。

.foo {
  color: red;
  &:hover {
    color: blue;
  }
}
/* 相当于: */
.foo { color: red; }
.foo:hover { color: blue; }
.foo {
  color: red;
  + .bar {
    color: blue;
  }
}
/* 相当于: */
.foo { color: red; }
.foo + .bar { color: blue; }

但是,以标识符(类型选择器)开始嵌套选择器是无效的:

div {
  color: red;
  input {
    margin: 1em;
  }
}
/* 无效,因为 input 是一个标识符 */

如果想继续这样编写,就需要稍微进行修改:

div {
  color: red;
  & input { margin: 1em; }
  /* 有效,不再以标识符开头 */
  :is(input) { margin: 1em; }
  /* 有效,以冒号开头,并且等同于之前的规则 */
}

更多嵌套规则详见 CSS 嵌套草案drafts.csswg.org/css-nesting…

嵌套选择器

在使用嵌套规则时,必须能够引用父规则匹配的元素。为此,规范中定义了一个新的选择器,即嵌套选择器,写为 &

当在嵌套样式规则的选择器中使用时,嵌套选择器表示与父规则匹配的元素。 当在任何其他上下文中使用时,它表示与该上下文中的 :scope 相同的元素。

嵌套选择器可以通过 :is() 选择器将其替换为父样式规则的选择器。 例如:

css

复制代码

a, b {
  & c { color: blue; }}

这就相当于:

:is(a, b) c { color: blue; }

嵌套选择器不能表示伪元素(与 :is() 的行为相同):


.foo, .foo::before, .foo::after {
  color: red;  &:hover { color: blue; }}

这里,& 只代表.foo匹配的元素,它等同于:


.foo, .foo::before, .foo::after {
  color: red;}.foo:hover {
  color: blue;}

嵌套选择器的特异性(权重)等于父样式规则的选择器列表中复杂选择器中最大的特异性(与 :is() 的行为相同):


#a, b {
  & c { color: blue; }}.foo c { color: red; }

DOM 结构如下:


<b class=foo>  <c>Blue text</c></b>

文本将是蓝色的,而不是红色的。 & 的特异度是 #a([1,0,0]) 和 b([0,0,1]) 特异性中较大的一个,所以是 [1,0,0],而整个 & c 选择器具有特异性 [1,0,1],它大于 .foo c ([0,1,1]) 的特异性。

值得注意的是,这与将嵌套手动扩展为非嵌套规则时得到的结果不同,因为 color: blue 声明将由 b c 选择器 ([0,0,2]) 匹配,而不是#a c ([1,0,1])。


小结


目前 CSS 嵌套语法规范仍处于草案阶段,随时可能进行更改。因此,文中的规则可能会有所变化。期待不久的将来 CSS 原生嵌套语法登录浏览器正式版本!

相关文章
|
2月前
|
前端开发
css的语法
【4月更文挑战第12天】css的语法
25 2
|
16天前
|
前端开发
CSS全部标签属性重置语法
每个浏览器默认的属性不同,像谷歌浏览器不设置的话,默认每个元素是有外边距margin的,有的浏览器列表还会带上序号,有的浏览器就没有。
18 6
|
2月前
|
前端开发
CSS分组和嵌套选择器
CSS分组和嵌套选择器。
25 1
|
2月前
|
前端开发
CSS 语法
【5月更文挑战第3天】CSS 语法。
35 10
|
2月前
|
前端开发
【Web前端】CSS基本语法规范和引入方式&&常见选择器用法&&常见元素属性
【Web前端】CSS基本语法规范和引入方式&&常见选择器用法&&常见元素属性
|
2月前
|
前端开发 JavaScript 索引
CSS常见用法 以及JS基础语法
CSS常见用法 以及JS基础语法
34 0
|
2月前
|
前端开发
CSS的语法是用来定义网页中元素样式的规则集合
【4月更文挑战第6天】CSS的语法是用来定义网页中元素样式的规则集合
28 5
|
2月前
|
前端开发
CSS的常用语法
【4月更文挑战第7天】CSS的常用语法
19 3
|
前端开发
常用CSS缩写语法总结
使用缩写可以帮助减少你CSS文件的大小,更加容易阅读。css缩写的主要规则如下: 颜色 16进制的色彩值,如果每两位的值相同,可以缩写一半,例如:#000000可以缩写为#000;#336699可以缩写为#369; 盒尺寸 通常有下面四种书写方法: property:value1; ...
812 0
|
15天前
|
前端开发 UED
使用HTML和CSS创建响应式表格
在网页设计中,表格是一种组织和展示数据的有效方式。本文档将指导你如何使用HTML和CSS来创建一个既美观又响应式的表格,以便在不同设备和屏幕尺寸上都能良好显示。我们将涵盖基础的HTML表格结构,样式美化以及如何实现响应式布局,使得表格内容在小屏设备上也能清晰阅读
57 0