如何对多个CSS文件使用CSS继承



我使用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-dark-primary继承sidebar-custom或从另一个文件继承sidebar-light-primary

你不能。CSS没有允许您编写从不同规则集导入规则的规则的功能。它也没有任何改变应用于元素的类的特性。

在CSS中,继承的意思是"继承";从父元素"中获取属性的值;。

在本例中,其中一个链接继承了父div的字体颜色,而另一个没有(因此具有浏览器应用的默认链接颜色(。

#parent {
color: green;
}
#inherits {
color: inherit;
}
<div id="parent">
<a id="inherits" href="/">
some text
</a>
<br>
<a id="does-not-inherit" href="/">
some other text
</a>
</div>

使用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>

最新更新