82 lines
1.8 KiB
Vue
82 lines
1.8 KiB
Vue
<template>
|
||
<div b="1px solid #ccc" p="10px" mt="10px">
|
||
<div class="layer-demo">这是一个测试@layer的元素</div>
|
||
<div class="layer-nested">这是测试嵌套layer的元素</div>
|
||
|
||
<div class="layer-explanation">
|
||
<h3>@layer 优先级规则:</h3>
|
||
<ol>
|
||
<li>后定义的layer比先定义的layer优先级高</li>
|
||
<li>在同一个layer中遵循正常的CSS优先级规则</li>
|
||
<li>没有在任何layer中的样式优先级高于所有layer</li>
|
||
</ol>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<style lang="css">
|
||
/* 测试 @layer */
|
||
|
||
/* 声明layer的顺序决定了优先级 - 越后声明的优先级越高 */
|
||
@layer base, components, utilities;
|
||
|
||
/* base layer 包含基础样式 */
|
||
@layer base {
|
||
.layer-demo {
|
||
color: blue;
|
||
font-size: 18px;
|
||
padding: 10px;
|
||
border: 1px solid #ccc;
|
||
margin: 10px 0;
|
||
}
|
||
|
||
.layer-nested {
|
||
color: blue;
|
||
padding: 10px;
|
||
border: 1px solid #ccc;
|
||
margin: 10px 0;
|
||
}
|
||
}
|
||
|
||
/* components layer 包含组件样式 */
|
||
@layer components {
|
||
.layer-demo {
|
||
color: red; /* 这个会覆盖base中的blue,因为components在base之后声明 */
|
||
background-color: #f0f0f0;
|
||
}
|
||
}
|
||
|
||
/* utilities layer 包含工具类样式 */
|
||
@layer utilities {
|
||
.layer-demo {
|
||
font-weight: bold;
|
||
color: green; /* 这个会覆盖components中的red,因为utilities优先级更高 */
|
||
}
|
||
}
|
||
|
||
/* 嵌套layer的示例 */
|
||
@layer components {
|
||
@layer special {
|
||
.layer-nested {
|
||
color: purple;
|
||
font-weight: bold;
|
||
}
|
||
}
|
||
|
||
/* components.base 比 components.special 优先级低 */
|
||
@layer base {
|
||
.layer-nested {
|
||
background-color: #eaeaea;
|
||
}
|
||
}
|
||
}
|
||
|
||
/* 不在任何layer中的样式优先级最高 */
|
||
.layer-explanation {
|
||
margin: 20px 0;
|
||
padding: 15px;
|
||
background-color: #f8f8f8;
|
||
border-left: 4px solid #42b983;
|
||
}
|
||
</style>
|