文章/答案/技术大牛

发布

社区首页 >问答首页 >如何在多个CSS文件中使用CSS继承？

问如何在多个CSS文件中使用CSS继承？
EN

Stack Overflow用户

提问于 2022-07-26 11:26:28

回答 1查看 68关注 0票数 2

我正在使用AdminLTE作为我的造型基础。有一个叫做.sidebar-dark-primary的类。

在我的一页中：

<aside class="main-sidebar sidebar-dark-primary elevation-4">
</aside>

现在，我有了一个单独的CSS文件，它在所有其他文件之后加载，并且只在满足条件的情况下加载。

我需要将页面更改为：

<aside class="main-sidebar sidebar-custom elevation-4">
</aside>

sidebar-custom来自于单独的文件。

如何将sidebar-custom从一个文件中的sidebar-dark-primary继承到另一个文件中的sidebar-light-primary？

blazor

blazor-server-side

adminlte

html

css

回答 1

Stack Overflow用户

发布于 2022-07-26 11:52:06

使用CSS特异性

一些前端和CSS框架也有一个微笑的想法。这不能通过简单地替换类来解决。

您可以通过元素中的两个类来实现它。这不是真正的继承，而是专一性：

MDN: CSS特异性

请参阅下面的片段来说明这一点。

/* main file */

* { margin: 0; padding: 0; }
aside { display: block; color: #999; } /* just for this snippet */
.sidebar { padding: 5px; margin: 10px; border: 2px solid blue; }
.sidebar-dark { background-color: #222; }
.sidebar-dark-primary { background-color: #226; }


/* separate file with customizations */

.sidebar-custom { background-color: #636; border-color: green; }

<html>
<body>

<aside class="main-sidebar sidebar elevation-4">
Sidebar
</aside>

<aside class="main-sidebar sidebar sidebar-dark elevation-4">
Sidebar: Dark
</aside>

<aside class="main-sidebar sidebar sidebar-dark-primary elevation-4">
Sidebar: Dark Primary
</aside>

<aside class="main-sidebar sidebar sidebar-dark-primary sidebar-custom elevation-4">
Sidebar: Dark Primary Custom
</aside>

</body>
</html>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/73122549

复制

相似问题

问如何在多个CSS文件中使用CSS继承？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在多个CSS文件中使用CSS继承？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在多个CSS文件中使用CSS继承？
EN