CSS 权重(优先级规则)

(1)!important声明 - 最高优先级

css 复制代码
p {
  color: blue !important; /* 最高优先级,即使有其他冲突规则 */
}
.text {
  color: red;
}

(2)内联样式 - 权重值1000

css 复制代码
<p style="color: green;">这个文字是绿色的(内联样式)</p>

<style>
  p { color: red; } /* 不会生效 */
  #special { color: blue; } /* 不会生效 */
</style>

(3)ID选择器 - 权重值100

css 复制代码
#header {
  color: purple; /* ID选择器 */
}
.header {
  color: gray; /* 类选择器 - 优先级较低 */
}

(4)类选择器/属性选择器/伪类选择器 - 权重值10

css 复制代码
.container { /* 类选择器 */
  background: lightblue;
}
input[type="text"] { /* 属性选择器 */
  border: 2px solid red;
}
a:hover { /* 伪类选择器 */
  color: orange;
}
div { /* 元素选择器 - 优先级较低 */
  background: white;
}

(5)元素选择器/伪元素选择器 - 权重值1

css 复制代码
p { /* 元素选择器 */
  font-size: 16px;
}
p::first-letter { /* 伪元素选择器 */
  font-size: 24px;
}

(6)通用选择器/关系选择器 - 权重值0

css 复制代码
* { /* 通用选择器 - 优先级最低 */
  margin: 0;
  padding: 0;
}
div > p { /* 关系选择器 - 优先级与单独p元素相同 */
  color: darkgreen;
}

综合

css 复制代码
/* 权重: 1个ID(100) + 1个类(10) + 1个元素(1) = 111 */
#content .article p {
  color: navy;
}

/* 权重: 2个类(10+10=20) + 1个元素(1) = 21 */
.container .text p {
  color: red; /* 不会生效,因为111 > 21 */
}

/* 权重: 1个元素(1) */
p {
  color: green; /* 不会生效 */
}
相关推荐
web打印社区3 小时前
使用React如何静默打印页面:完整的前端打印解决方案
前端·javascript·vue.js·react.js·pdf·1024程序员节
喜欢踢足球的老罗3 小时前
[特殊字符] PM2 入门实战:从 0 到线上托管 React SPA
前端·react.js·前端框架
小光学长4 小时前
基于Vue的课程达成度分析系统t84pzgwk(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。
前端·数据库·vue.js
Baklib梅梅5 小时前
探码科技再获“专精特新”认定:Baklib引领AI内容管理新方向
前端·ruby on rails·前端框架·ruby
南方以南_5 小时前
Chrome开发者工具
前端·chrome
YiHanXii5 小时前
this 输出题
前端·javascript·1024程序员节
楊无好5 小时前
React中ref
前端·react.js
程琬清君5 小时前
vue3 confirm倒计时
前端·1024程序员节
歪歪1005 小时前
在C#中详细介绍一下Visual Studio中如何使用数据可视化工具
开发语言·前端·c#·visual studio code·visual studio·1024程序员节
唔665 小时前
flutter实现web端实现效果
前端·flutter