🎨 CSS选择器优先级计算器
输入CSS选择器,精准计算specificity值,掌握权重规则
📝 输入选择器
📖 CSS权重规则速查
| 选择器 | 权重 | 示例 |
|---|---|---|
| !important | 最高 | color:red!important |
| 内联样式 | (1,0,0,0) | style="color:red" |
| ID | (0,1,0,0) | #header |
| 类/属性/伪类 | (0,0,1,0) | .btn, [type], :hover |
| 标签/伪元素 | (0,0,0,1) | div, ::before |
| 通配符* | (0,0,0,0) | * |
什么是CSS选择器优先级计算器
CSS选择器优先级计算器是一款精准计算CSS选择器specificity值的在线工具,支持ID、类、属性、标签和伪类选择器。输入选择器即可实时查看权重解析结果,操作简单快捷。该工具完全在浏览器端运行,无需安装软件,无需注册,打开即用。所有数据仅在本地处理,不上传服务器。
使用场景
- 前端开发时快速生成CSS代码片段
- 设计稿调整时尝试不同配色和效果
- 学习CSS时实时预览效果
- 移动端查看效果,不用开编辑器
工具特点
- 完全免费:无注册无限制
- 隐私安全:数据不上传
- 跨平台:任何浏览器可用
- 零依赖:打开即用