CSS范围的初期

CSS范围正在获得吸引力，目前的工作草案规范代表了重大进展。由Miriam Suzanne率领的这一提议解决了以前尝试的局限性。

核心概念以明确针对特定的HTML组件的样式为中心。 @scope规则促进了这一点：

<code><div>
  <img src="/static/imghw/default1.png" data-src="https://img.php.cn/" class="lazy" alt="CSS范围的初期"><div>
    <p>...</p>
  </div>
</div></code>

造型此“组件”变得高度关注：

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

关键优势包括：

1. 清除组件级的样式，简化维护。
2. 避免命名冲突；样式包含组件中。

虽然父母课程预备提供类似的范围（ .media ， .media img ， .media .content ），但CSS嵌套提供了更简洁的替代方法：

 <code>.media { & img { } & .content { } }</code>

但是， @scope提供了独特的功能。 “甜甜圈范围”允许精确控制范围边界：

 <code>@scope (.media) to (.content) { p { } }</code>

这可以防止样式泄漏超出所需区域：

<code><div>
  <img src="/static/imghw/default1.png" data-src="https://img.php.cn/" class="lazy" alt="CSS范围的初期"><p>这在范围中是可说的。</p>
  <div>
    <p>这在范围上不可用。</p>
  </div>
</div></code>

该规格还优雅地处理了“最近的祖先”场景，对现有方法的重大改进。 Miriam的博客提供了有关此复杂性和其他复杂性的详细说明，包括重叠的范围和与嵌套的互动。强烈建议进一步探索她的工作。

以上是CSS范围的初期的详细内容。更多信息请关注PHP中文网其他相关文章！