登录  /  注册
博主信息
博文 94
粉丝 0
评论 0
访问量 111325
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
【CSS】选择器权重:(0,0,1)
可乐随笔
原创
561人浏览过

CSS 选择器权重

  1. *CSS选择器用3个正整数,来表示选择器的权限*

1. 权重规则

  1. 实体标记 id, class, tag
  2. 排列顺序:id, class, tag
  3. 记数器:选择器中的实体标记数量

2. 权重表示方法

  1. 0 0 1
  2. id,class,tag
  3. 第一个数字表示有多少个id,第二数字表示有多少个class,第三数字表示有多少个tag.

3. CSS 优先级

  1. 权重数量越大,CSS选择器权重越大,比如 0,0,2 > 0,0,1
  1. h1 {
  2. color: red;
  3. }
  4. body h1 {
  5. color: blue;
  6. }

如果要将h1的红色改写,可以再写一个权重更大的CSS选择器,如上

这么写的好处:

摆脱了对选择器的限制
不需要修改html源代码

4. 权重注意事项:尽量不要在 html 中使用 id 属性

  1. 为什么?
  2. id 权重过大,位于权重顶端
  3. id 会导致选择器弹性不路,不利于调试或复用

5. 权重经典应用场景:class 动态调整样式

  1. 如果项目是依赖UI库:bootstrap.css,直接修改bootstrap.css会影响其他依赖此CSS的项目,也不利于后期升级.
  2. 建议方案:修改`html.class`,为它添加自定义类
  3. 如,项目中用到 .col-md-6,要修改它,可以为它增加一个自定义类.col-md-6.bgc{}的链式类.引用方法:class="col-md-6 bgc"

最新的商业项目,主流都是CSS类叠加

批改老师:PHPzPHPz

批改状态:合格

老师批语:
本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系admin@php.cn举报处理!
全部评论 文明上网理性发言,请遵守新闻评论服务协议
0条评论
作者最新博文
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • 登录PHP中文网,和优秀的人一起学习!
    全站2000+教程免费学