【ES三周年】一文弄懂css权重 时讯
对于初学者来说,在修改网页样式时可能偶尔会有这个疑问:为什么我添加了样式但不生效呢?
这时候就需要了解权重(weight)相关知识了
css的权重判断一般来说有四类
(资料图片仅供参考)
important(最优先)和行内样式(次优先)ICE权重值(后文说明)最基础的一条,就是选择器匹配,简单来说就是css代码对应的html元素先后顺序(后写的覆盖先写的)这里的顺序类似css的判断顺序,即第一点如果不符,那就顺延第二点,都不符合,那就按最后的先后顺序兜底
其他几条比较好理解,本文着重讲讲【ICE权重】
什么是【ICE】呢?听起来高大上,其实只是ID,Class,Element的缩写罢了,即id选择器,class选择器和html元素,按照ICE的顺序来算,也就是说
id > class > html
怎么计算呢?凡是元素有被对应选择器选择到,就在对应位数上+1,比如说一个html元素有两个class名,那么权重就是0-2-0
注意,权重是相对【一段css代码】,而不是相对元素
比如
这种情况,id,class和元素选择器互相有重复的属性,那么虽然对象是同一个元素,但这个元素【没有】权重值的概念
没有说元素的权重是1-1-1,而是第一个段css代码权重0-0-1,第二段0-1-0,第三段1-0-0,那么根据规则,自然是1-0-0最大,所以颜色值为#f00cec
第二个注意点,不要简单认为ICE是三位数,他们每一位都是【独立】计算的
简单来说就是“官大一级压死人”,即便0-0-11(如果按位数算是11),也大不过0-1-0,当然,很少会出现这种场景,了解即可
第三个注意点:如果权重刚好相等怎么办?其实可以直接根据上述四点来判断,可以得出答案是顺序
即【后面的覆盖前面的】
第四个注意点:继承的样式【没有】权重,这个简单理解即可
例如body标签有个font-size设置字体大小为16px,那么body标签的子元素(例如有个p标签),也会继承16px的样式,但是这段代码的权重和该标签其他的权重比较时算作0-0-0,因为并不是直接选中了该标签
相关阅读
精彩推荐
- 【ES三周年】一文弄懂css权重 时讯
- 索菱股份(002766)2名股东合计质押6564.97万股,占总股本7.75% 热点评
- 环球信息:秦刚:中国的领土一寸都不能少具体是什么情况
- 送走“回锅沙”将迎“土台风”,下周或直冲30℃!-速读
- 如何把美食流量变成城市文旅IP “淄博烧烤”背后做法耐人寻味
- 女生希望收到什么礼物 世界看点
- 国台办:愿为两岸青年加强交流互动创造一切条件
- 今日热搜:草小西区亲子运动会亮点十足,家长直呼“最幸福家长”
- 【“三抓三促”进行时】破案挽损暖民心 群众称赞送锦旗|世界今亮点
- 马斯克公告 Twitter Blue 赚钱方式:未来 12 个月不收取佣金 _世界热消息
- 【情牵两岸】台湾艺术家丹青入蜀:行海峡万里 绘两岸千城|最新_看热讯
- 《蜘蛛侠:纵横宇宙》杂志封面曝光,“小黑蛛”开启多元宇宙冒险-世界球精选
- 失意大军涌入外卖,骑手人满为患,收入腰斩
- 甘肃华电天祝松山滩200MW风电项目风场内道路原牧场围栏恢复及赔偿施工分包工程废标公示|每日热闻
- 要闻:2023年宁夏普通高等学校招生体育专业术科测试通告
- 地处西乡塘区繁华商圈!南宁北湖北路一幅旧改地出让 世界热议
- 上海中芬助力印度鼓达项目1号机组成功完成14天可靠性运行
- 当前通讯!天呐,为什么我买的房子还在跌!
- 每日一冷 NO.3667 天天头条
- 电竞必备!碳纤维电脑桌到手仅需79元
- 新消息丨曼联遭绝平尤文奏凯罗马告负,你看好谁最终晋级欧联四强?
- 六年持续前行 2023“湘窖·我的大学梦”在隆回启动
- 【哈尔滨新闻网】香坊区:农机检修保养 确保“健康”上岗|新要闻
- 海森堡简介 海森堡_环球通讯
- 当前资讯!高频数据看消费回暖 夜间经济激发消费活力
- 中国建设银行手机银行登录授权码_中国建设银行手机银行登录
- 电视剧渗透简介_电视剧渗透剧情介绍 世界快播报
- 马斯克给推特“改名”:把Twitter里的w删掉,叫“傻笑”_全球焦点
- 世界播报:比亚迪于北京成立销售公司
- LPL十大选手定妆照—光影轮转,赴十年之约|世界新视野