224 - 《CSS 新特性：Layers、嵌套、Scoped、has 伪类》

本文是基于 https://www.bram.us/2022/12/02/css-architecture-2022-12-01-web-directions-summit/ 做的笔记。

CSS Layers

CSS Layers 比「Specificity」优先级更高。使用 CSS Layers ，你可以将样式分割成若干层，并控制每层的优先级。支持的浏览器是 Chrome 99、Edge 99、Firefox 97、Safari 15.4。

/* 声明优先顺序 */
@layer reset, thirdparty; base, components;
/* 支持外部 @import */
@import url(map.css) @layer thirdparty;
@import url(carousel.css) @layer thirdparty;
@layer reset {}
@layer base {}
@layer components {}

CSS 嵌套

兼容情况是，Chrome 109 和 Edge 109 支持，Firefox 和 Safari 目前不支持。语法目前仍在讨论，目前最新的 proposal 5 是基于 & 语法。

.foo {
  & .bar { color: red; }
}

Scoped Style

先来个题，问：以下代码中，foo、bar 和 hoo 的 color 和 background 分别是啥？

<style>
.light { background: #ccc; /*浅灰*/ }
.dark  { background: #333; /*深灰*/ }
.light a { color: red; }