有如下一个样式表:
/*import.css*/
.box p {
color: yellow;
}
希望通过@import
语法将其引入.style.css
,并修改 import.css 的级联优先级:
@layer component-1,component,importLayer;
// @import './import.css';
@import url('./import.css') layer(importLayer);
@layer component {
.box p {
background-color: lightblue;
font-size: 25px;
color: red;
}
}
@layer component-1 {
.box p {
color: blue;
}
}
通过@layer component-1,component,importLayer;
把importLayer的级联优先级设置为最高的,让p的文字为yellow
,可是结果为red
。
import 的外部样式如何指定级联优先级呢?