CSS/CSS3 | P4-选择器优先级权重
1、概念
权重(weight),也可理解为优先级(Specificity)
REF: specificity-MDN
2、为什么需要权重?
优先级,优先级,需要出现一个情况发生冲突在不同选择上(如样式冲突)
样式冲突: 通过不同选择器,选择中相同元素,设置不同样式值时,样式会面临一个选择的问题,这时就发生了冲突了。
3、选择器权重分类
选择器 | 权重 |
---|---|
!important | 最高优先级 |
内联样式 | 1,0,0,0 |
id选择器 | 0,1,0,0 |
类和伪类选择器 | 0,0,1,0 |
元素选择器 | 0,0,0,1 |
通配选择器 | 0,0,0,0 |
继承的样式 | 没有优先级 |
使用原则:
- 选择器权重相加,谁高选谁(分组选择器是单独计算)
- 选择器累加不会超过其最大数量级(如
类选择器
在怎么叠加不会超过id选择器
) - 如权重计算后相等,则按照执行自上而下原则(
就近原则
)选择选择器样式 - 在样式后面加上
!important
表示最高优先级(开发慎用)
涉及优先级的问题: 有时设置样式,发现没有生效,可能是优先级的问题
来源: 博客园
作者: 茶哩哩
文章: 转载请注明原文链接:https://www.cnblogs.com/martin-1/p/15212631.html
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型,支持深度思考和联网搜索!
· 使用C#创建一个MCP客户端
· 基于 Docker 搭建 FRP 内网穿透开源项目(很简单哒)
· ollama系列1:轻松3步本地部署deepseek,普通电脑可用
· 按钮权限的设计及实现