样式不生效/被覆盖（CSS优先级陷阱）

小白阿龙2025-12-19 11:57

问题现象

写好的CSS样式在页面上无效果，或Elements面板中样式被划掉（表示被覆盖）。

深层原因

选择器优先级不足：被更高优先级的样式覆盖。
样式拼写/取值错误 ：如color写成colour、font-size: 14pxs。
样式作用域问题：如Vue的scoped样式隔离。
浏览器默认样式覆盖 ：如body的默认margin。

分步解决方案

步骤1：计算CSS选择器优先级（核心）

CSS优先级权重（从高到低）：

内联样式（style="color: red"）：1000
ID选择器（#app）：100
类选择器（.box）/伪类（:hover）/属性选择器（[type="text"]）：10
标签选择器（div）/伪元素（::before）：1
通配符（*）/继承样式：0

示例：

css 复制代码

/* 权重：100+10=110 */
#app .box { color: blue; }

/* 权重：10（被覆盖） */
.box { color: red; }

/* 临时解决（慎用！important） */
.box { color: red !important; }

步骤2：处理Vue的scoped样式作用域

Vue的scoped样式会给元素添加唯一属性（如data-v-xxx），仅作用于当前组件的DOM。若需修改子组件样式，需用深度选择器：

vue 复制代码

<style scoped>
/* Vue3 */
:deep(.child-box) { color: red; }

/* Vue2 */
::v-deep .child-box { color: red; }
</style>

步骤3：重置浏览器默认样式

使用Normalize.css或自定义重置样式，统一浏览器表现：

css 复制代码

/* 简单重置 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box; /* 盒模型：width包含padding和border */
}
ul { list-style: none; }
a { text-decoration: none; color: inherit; }