CSS 原生嵌套来了

前言

在web发展的过程中，有很多API都是浏览器吸收了开源社区的热门库后出现的，比如 document.querySelector 吸收了 jQuery 的精华，或者Promise，JSON的相关API都是先出现在社区，然后被浏览器原生支持。今天我们要谈的css原生嵌套也是借鉴了less，sass等社区方案而出现的。

css原生嵌套

在没有css原生嵌套之前，如果不借助css预处理器，我们可能经常要写这样的代码：

.nesting {
  color: hotpink;
}

.nesting > .is {
  color: rebeccapurple;
}

.nesting > .is > .awesome {
  color: deeppink;
}

有了css原生嵌套之后，我们可以这样写：

.nesting {
  color: hotpink;

  > .is {
    color: rebeccapurple;

    > .awesome {
      color: deeppink;
    }
  }
}

可以发现，使用css嵌套之后，我们的代码量更少，而且结构更清晰。

&符号

在less中, 我们可以用&来表示嵌套的父级选择器，在css原生嵌套中也是这个效果：

.card {
  .featured & {
    /* 表示 .featured .card */
  }

  & .featured  {
    /* 表示 .card  .featured */
  }
  &.featured  {
    /* 表示 .card.featured，注意没有空格 */
  }
}

与less 中 & 的区别

1. 不支持字符串连接
   在less中，我们可以使用&来拼接选择器的字符串：

.card {
  &--header {
    /* 等于 .card--header/
  }
}

但是在css原生嵌套这么做是不生效的。具体可以看这个解释

2. 不支持直接嵌套html标签选择器
   在less中，我们可以这么写：

.card {
 h1 {
    /* 等于 .card h1/
  }
}

但是在css嵌套中，这么写是无效的，如果要想达到这样的效果，我们可以这么写：

.card {
 & h1 {
    /* 等于 .card h1/
  }
/*或者*/
:is(h1) {
  /*OK*/
}
}

总结一下就是，被嵌套的选择器必须以下面的字符开头：

所以嵌套 div 之类的 HTML 标签是不生效的

本文完

参考文档：

https://developer.chrome.com/articles/css-nesting/#understanding-the-nesting-parser