前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >CSS之层叠值

CSS之层叠值

作者头像
小明爱学习
发布2020-12-01 10:47:46
5050
发布2020-12-01 10:47:46
举报
文章被收录于专栏:smh的技术文章smh的技术文章

样式表

由于样式表只有两种来源,所以优先级很简单,用户自定义样式表高于浏览器默认样式表。

选择器

1. 行内样式:

指的就是在html元素上使用style属性应用的样式。行内样式大于一切选择器,小于important

2. 选择优先级:

优先级的准确规则如下。

如果选择器的ID数量更多,则它会胜出(即它更明确).。..如果ID数量一致,那么拥有最多类的选择器胜出。.

如果以上两次比较都一致,那么拥有最多标签名的选择器胜出。

上述代码优先级为:4>3>2>1

样式4因为有ID选择器存在,优先级最高。

样式3由于有两个类选择器,大于样式2的一个类。

样式2有一个选择器,大于样式1的4个标签选择器。

优先级还有一个数字表示方法:0,0,0

比如:1,2,0 就表示这个优先级是由1个ID,2个class,0个标签组成的选择器。

例子:#page .box ul li,用数字表示就是1,1,2

数值越大,自然优先级也就越大。

3. Important:

使用important的样式则拥有最高的优先级,important的数量越多,则优先级越高。

源码顺序

如果两个样式的来源和优先级都相同,则只有通过样式出现的顺序来决定层叠值,后面的样式会覆盖前面的样式。

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2020年11月28日,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 样式表
  • 选择器
  • 例子:#page .box ul li,用数字表示就是1,1,2
  • 源码顺序
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档