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