CSS范围界定的早期阶段现在有一个关于CSS范围的工作规范草案。除了一个奇怪的时期，即<style scoped> ，然

现在有一个关于CSS范围的工作规范草案。除了一个奇怪的时期，即<style scoped> ，然后又从规范（和浏览器）中删除，这是一个范围界定建议走得最远的一次（一级规范从未走到哪里）。

基础知识。

<div class="media">
  <img alt="Proper alt." src="...">
  <div class="content">
    <p>...</p>
  </div>
</div>

如果我把这部分HTML看作是一个 "组件"，那么能够为它编写非常明确的样式就很好。这就是@scope ，所以...。

@scope (.media) {
  :scope {
    display: grid;
    grid-template-columns: 50px 1fr;
  }
  img {
    filter: grayscale(100%);
    border-radius: 50%;
  }
  .content { ... }
}

我喜欢这一点。

这一点的CSS是非常明确地针对这个媒体组件的。它读起来是这样的，可以这样维护。
我不必为<img> 。我在那里应用样式，而不会 "泄露 "给其他图片。

但是等等，这不就是用父类来预置选择器吗？

这有点像......就像我们也可以写。

.media {
}
.media img {
}
.media .content {
}

现在我们已经在媒体组件内部划分了范围。那是相当重复的，但随着原生CSS嵌套的到来，这只是这样而已。

.media {
  & img {
  }
  & .content {
  }
}

所以，是的，我说嵌套处理了一些基本类型的范围，但有一些东西对这个新的范围提议来说是非常独特的。

一个独特的功能是"甜甜圈范围"，意思是我在我想要的地方停止范围界定。也许我想让我的作用域在某个特定的类上停止。

@scope (.media) to (.content) {
  p { }
}

现在，我可以写一些样式，这些样式不会扰乱我不希望它们扰乱的领域。也许是这样。

<div class="media">
  <img alt="Proper alt." src="...">
  <p>This is stylable in scope.</p>
  <div class="content">
    <p>This is NOT styleable in scope.</p>
  </div>
</div>

但这并不是这个新规范所解决的唯一独特问题。我认为Miriam提出的 "最近的祖先 "情况可能是最有趣的事情。我会让你去看那篇博文的--我们还没有一个好的工具来解决这个问题，这很疯狂。

这里有很多东西需要你去思考，特别是当你想到更复杂的情况时，比如多个重叠的作用域以及嵌套语法如何与作用域相互作用。幸运的是，Miriam在博客上把这些事情写得很清楚。

CSS Scoping的早期阶段出现在CSS-Tricks上。你可以通过成为MVP支持者来支持CSS-Tricks。