Files
vue-ts-example/src/components/StyleLayer.vue
mini2024 974f05719e
All checks were successful
/ lint-build-and-check (push) Successful in 2m58s
/ depcheck (push) Successful in 3m14s
/ build-and-deploy-to-vercel (push) Successful in 3m36s
/ surge (push) Successful in 3m45s
/ playwright (push) Successful in 7m43s
feat: 添加 StyleLayer 组件,展示 @layer 优先级规则及样式示例;新增 style.page.vue 页面
2025-03-22 18:29:23 +08:00

82 lines
1.8 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

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