要摆脱 !important, 首先要深入理解 CSS 优先级的计算方式。
优先级权重系统 CSS 优先级可以用四位数字表示（a, b, c, d）
a: 内联样式（1000） b: ID 选择器的数量（100） c: 类选择器，属性选择器，伪类的数量（10） d: 元素选择器，伪元素的数量（1）
<template>
<div>
<div id="main-content">
<div>css</div>
<div class="article">这是一段文字</div>
</div>
<div id="sidebar">
<div class="container">
<div class="button">button</div>
</div>
</div>
<div class="special">
<div>special</div>
</div>
</div>
</template>
<script setup lang="ts">
</script>
<style scoped lang="scss">
// 1. 巧用 ID 选择器
// 优先级：（0，1，0，0）= 100
#main-content .article {
font-size: 16px;
}
// 优先级（0，0，1，0） = 10
.article {
font-size: 14px; // 会被上面的样式覆盖
}
// 2. 增加选择器的特异性
.button {
background-color: gray;
}
.container .button {
background-color: blue;
}
#sidebar .button {
background-color: green;
}
// 4. 重复选择器技巧
.special {
color: blue;
}
.special.special {
color: red;
}
</style>
