由CSS解决：甜甜圈范围-css教程-PHP中文网

首页

web前端

css教程

由CSS解决：甜甜圈范围

尊渡假赌尊渡假赌尊渡假赌

Mar 07, 2025 pm 05:03 PM

Solved by CSS: Donuts Scopes

想象您有一个可以显示许多不同内容的Web组件。它可能在某个地方可以注入其他组件的地方。父组件还具有与其可能拥有的内容组件的样式无关的样式。>

>这是一个具有挑战性的情况：我们如何防止亲本组件样式向内泄漏？

这不是一个新问题 - 妮可·沙利文（Nicole Sullivan）在2011年描述了它！主要问题是编写CSS，以免影响内容，她将其准确地创建为 Donut scoping 。。

“我们需要一种说法，不仅在范围开始的地方，而且在范围结束的地方。因此，示波器甜甜圈”。

>即使甜甜圈范围是网络年份的古老问题，如果您在选择的搜索引擎中快速搜索“ CSS Donut Scope”，您也可能会注意到两件事：>

他们中的大多数都在谈论仍然最近的@Scope At-Lule。
>
几乎每个结果都是从2021年开始。

>即使有一个巧妙的“ CSS Donut Scope - @scope”查询，我们也会获得类似的结果，并且逐年逐年进行

表。似乎甜甜圈范围一直呆在我们的脑海中，只是OL'CSS全球范围的另一个头痛，直到@Scope。
> 例如，以以下游戏屏幕为例。我们有一个带有选项卡集和一个.content插槽的.parent元素，其中注入.Inventory组件。如果我们更改.parent颜色，那么内部的颜色也是。

我们如何阻止这种情况发生？我想防止.content内部的文字继承.parent的颜色。

> 只是忽略它！

第一个解决方案根本不是解决方案！

>这可能是最常用的方法，因为大多数开发人员可以在没有甜甜圈范围的乐趣的情况下过自己的生活（疯狂，对吗？）。让我们在这里更加切实，这不仅是公然忽略它，而且还要接受CSS的全球范围和写作风格。回到我们的第一个示例，我们假设我们不能阻止父母的样式向内泄漏到内容组件，因此我们以较少的特异性编写父母的样式，因此内容样式可以覆盖它们。

body {
  color: blue;
}

.parent {
  color: orange; /* Initial background */
}

.content {
  color: blue; /* Overrides parent's background */
}

>目前这种方法已经足够了，但仅通过其特异性来管理样式，随着项目的发展而变得更大，充其量是乏味的，充其量是在最坏的情况下进行混乱。组件的行为可能会有所不同，具体取决于它们的插入位置，并且更改我们的CSS或HTML可能会以意想不到的方式破坏其他样式。

>两个CSS属性走进了一个条。一个完全不同的栏中的bar凳掉落了。
thomas fuchs

>您可以看到在这个小例子中，我们必须两次覆盖样式：

>浅甜甜圈范围：不（）

我们的目标是只范围范围。因此，不是.content，而是其余的.parent…不是.content…

：not（）！我们可以使用：not（）选择器来范围仅范围。

以这种方式，.content样式不会被其.parent中定义的样式所困扰。

body {
  color: blue;
}

.parent > :not(.content) {
  color: orange;
}

>当我们为每个示例打开DevTools时，您会看到巨大的差异：

与改进一样好，最后一个例子有一个浅薄的范围。因此，如果还有一个更深的插槽，除非我们事先知道它会被插入的位置，否则我们将无法达到。

这是因为我们正在使用直接后代选择器（＆gt;），但是我找不到没有它使它正常工作的方法。即使在内部使用复杂的选择器的组合：Not（）似乎也无法在任何地方有用。例如，回到2021年，Lea Verou博士提到了Donut Scoping with：non（）使用以下选择器鸡尾酒：

但是，此片段似乎与.Container/.parent类而不是其后代匹配，并且注意到它仍然是浅的甜甜圈范围：直到所有现代浏览器现在都支持：Not（）！？

>测试：https：//t.co/rhsjardvsw

.container:not(.content *) {
  /* Donut Scoped styles (?) */
}

>甜甜圈范围@scope

>因此，我们的甜甜圈范围完成的最后一步是能够超越一个DOM层。幸运的是，去年我们被@Scope Atrule有天赋（您可以在其《年鉴》中阅读更多有关它的信息）。简而言之，它使我们可以在DOM中选择一个子树，以便我们的样式被瞄准，因此没有更多的全局范围！
>

更好的是，我们可以将插槽留在我们选择的子树内（通常称为示波器根）。在这种情况下，我们希望在不划分的情况下对.parent元素进行样式。
body {
  color: blue;
}

.parent {
  color: orange; /* Initial background */
}

.content {
  color: blue; /* Overrides parent's background */
}
和更好的是，它可以检测到内部的每个.content元素。因此，我们不需要担心我们在哪里写老虎机。在最后一个示例中，我们可以编写以下样式来更改.parent中元素的文本颜色而无需触摸。
body {
  color: blue;
}

.parent > :not(.content) {
  color: orange;
}
>虽然列出要更改的所有元素似乎不便，但我们不能使用诸如Universal Selector（*）之类的东西，因为它会弄乱嵌套插槽的范围。在此示例中，它会将嵌套的.content排除在范围之外，而不是其容器。由于颜色属性继承，因此嵌套的.content将更改颜色，无论如何
>
和voilà！两个.CONTENT插槽都在我们范围的甜甜圈孔内：使用此方法，仍然可以使用
浅范围，我们只需要重写我们的插槽选择器，以便只有直接的。但是，我们必须使用：示波器选择器，该示波器选择器回到范围的根，或者在这种情况下：
>。
在这种情况下，我们可以使用通用选择器，因为它是浅范围的。
>
.container:not(.content *) { /* Donut Scoped styles (?) */ }
结论
Donut Scoping是2011年创造的一项想法，终于在2024年栩栩如生。直到最近，它仍然令人困惑，它似乎是如何坐在我们脑海中的，只是CSS Global Scope的另一个后果，而它本身就有这么多Quirks。但是，说这是不公平的，因为CSSWG（为新的CSS功能编写规范的人们）显然打算在为@Scope At-Rule编写规格时解决这个问题以来，这是不公平的。

无论是什么，我很感激我们可以在CSS中掌握真正的甜甜圈。在某种程度上，我们仍然必须等待Firefox支持它。？

此浏览器支持数据来自Caniuse，其中有更多详细信息。一个数字指示浏览器在该版本及向上支持该功能。

桌面

移动 /平板电脑