gridmanager兼容性（css grid兼容性）



作者：Dave Brock

本文介绍 CSS 隔离如何将 CSS 范围限定到 Razor 组件，以简化 CSS 并避免与其他组件或库发生冲突。

将 CSS 样式隔离到各个页面、视图和组件以减少或避免：

• 依赖难以维护的全局样式。
• 嵌套内容中的样式冲突。

若要定义组件特定的样式，请在相同文件夹中创建一个 文件，该文件与组件的 文件的名称相匹配。 文件是限定范围的 CSS 文件。

对于 文件中的 组件，请随组件一起创建一个名为 的文件。 文件必须驻留在与 组件 () 相同的文件夹中。 文件的“”基名称不区分大小写。

：

：

中定义的样式仅应用于 组件的呈现输出。 CSS 隔离适用于匹配的 Razor 文件中的 HTML 元素。 在应用的其他位置定义的任何 CSS 声明都不会与 组件的样式冲突。

CSS 隔离在生成时发生。 Blazor 会重写 CSS 选择器以匹配组件呈现的标记。 重写的 CSS 样式被作为静态资产捆绑和生成。 在 标记（ 内容的位置）中引用表样式。 以下 元素将添加到从 Blazor 项目模板创建的应用：

占位符是项目的程序集名称。

在捆绑的文件中，每个组件都与范围标识符关联。 对于每个具有样式的组件，HTML 属性追加有格式 ，其中 占位符是框架生成的十个字符的字符串。 标识符对每个应用都是唯一的。 在呈现的 组件中，Blazor 将范围标识符追加到 元素：

文件使用范围标识符将样式声明及其组件分为一组。 下面的示例提供了前面 元素的样式：

在生成时，会使用约定 创建项目捆绑包，其中占位符为：

• ：应用的生成配置（例如 、）。
• ：目标框架（例如 ）。
• ：应用的程序集名称（例如 ）。

CSS 隔离仅应用于与格式 关联的组件，其中 占位符通常是组件名称。 若要对子组件应用更改，请对父组件的 文件中的任何后代元素使用 pseudo-element。 pseudo-element 会选择属于元素生成范围标识符后代的元素。

下面的示例演示了名为 的父组件和名为 的子组件。

：

：

使用 pseudo-element 在 中更新 声明，以表示 样式声明必须应用于父组件及其子组件。

：

样式现在将应用于 和 组件，你无需为子组件创建单独的限定范围 CSS 文件。

pseudo-element 仅适用于后代元素。 以下标记会按预期将 样式应用于组件。 父组件的范围标识符应用于 元素，这样浏览器便知道从父组件继承样式。

：

但是，排除 元素将删除后代关系。 在下面的示例中，样式不应用于子组件。

：

pseudo-element 会影响范围特性应用于规则的位置。 在限定范围的 CSS 文件中定义 CSS 规则时，范围应用于最右侧的元素。 例如： 转换为 ，其中 占位符是框架生成的由十个字符组成的字符串（例如，）。 如果希望规则应用于其他选择器，则 pseudo-element 允许你执行此操作。 例如， 转换为 （例如，）。

将 pseudo-element 附加到任何 HTML 元素的功能使你能够创建限定范围的 CSS 样式，这些样式会影响当你可以确定呈现的 HTML 标记的结构时其他组件呈现的元素。 对于呈现另一个组件内的超链接标记 () 的组件，确保将组件包装在 （或任何其他元素）中，并使用规则 创建仅在父组件呈现时应用于该组件的样式。

利用 CSS 预处理器的变量、嵌套、模块、混合和继承等功能，可有效改进 CSS 开发。 虽然 CSS 隔离并不原生支持 CSS 预处理器（如 Sass 或 Less），但只要在生成过程中 Blazor 重写 CSS 选择器的步骤之前进行预处理器编译，就可以无缝集成 CSS 预处理器。 例如，使用 Visual Studio 将现有预处理器编译配置为 Visual Studio 任务运行程序资源管理器中的“生成前”任务。

许多第三方 NuGet 包（如 ）都可以在生成过程开始时编译 SASS/SCSS 文件，再进行 CSS 隔离。

CSS 隔离开箱即用，也可在某些高级场景（例如依赖于现有工具或工作流）下进行配置。

文件在应用的根目录生成。 在项目文件中，请使用 属性来更改默认路径。 下面的示例将 文件以及应用的 rest 资产放在 路径：

若要禁用 Blazor 在运行时发布和加载限定范围的文件，请使用 属性。 使用此属性时，意味着将由其他工具或进程从 目录中捕获隔离的 CSS 文件，并在运行时发布和加载这些文件：

通过在应用的项目文件中将 属性设置为 来禁用项目的 CSS 隔离：

NuGet 包或 Razor 类库 (RCL) 中组件的独立样式会自动捆绑：

• 应用使用 CSS 导入来引用 RCL 的捆绑样式。 对于名为 的类库和具有 样式表的 Blazor 应用，RCL 的样式表会导入到应用样式表的顶部：

• RCL 的捆绑样式不会作为使用该样式的应用的静态 Web 资产发布。

有关 RCL 的详细信息，请参阅以下文章：

• 使用 Razor 类库 (RCL) 中的 ASP.NET Core Razor 组件
• ASP.NET Core 的类库中的可重用 Razor UI

版权声明：

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！

转载请注明出处，原文链接：https://www.xkablog.com/qdhtml/14716.html