返回列表 发新帖

CSS学习之权重

[复制链接]

7805

主题

7805

帖子

2万

积分

论坛元老

Rank: 8Rank: 8

积分
23435
发表于 2021-7-27 15:58:08  | 显示全部楼层 | 阅读模式
(一)什么是CSS权重?


  • 权重决定了你CSS规则怎样被浏览器解析直到生效,即你的CSS规则是怎样显示的
(二)权重之比

权重比分查询游戏 :!important > 内联 > ID > 类 = 伪类 = 属性 > 标签(元素) = 伪元素 > 通配符
(三)怎么确定权重?


  • 权重记忆口诀
  • 从0开始:
  • 一个行内样式 + 1000;
  • 一个ID + 100;
  • 一个属性 / 类 / 伪类 + 10;
  • 一个元素 / 伪元素 + 1
  • NOTE:行内样式,指的是html文档中定义的style
  • NOTE:包含选择器的权重为:包含的选择器权重值之和
举例: body #content .data img:hover#content —— id选择器加了 100.data —— class类选择器加了 10:hover —— 伪类选择器加了 10body 、img —— 元素加了 1 最终的权重值是 0122按权重值博雅德州扑克下载
权重值| 选择器
----|----|----
0000|通用选择符 / 子选择符/继承的样式
0001|元素选择器
0010|属性选择器 / 类选择器 /伪类
0100|ID选择器
1000|行内样式
按选择器博雅德州扑克下载
选择器
表达式或示例
权重值
ID选择器
#aaa
100
类选择器
.aaa
10
标签选择器
h1
1
属性选择器
[title]
10
相邻选择器
selecter + selecter
拆分为两个选择器再计算
兄长选择器
selecter ~ selecter
拆分为两个选择器再计算
亲子选择器
selecter > selecter
拆分为两个选择器再计算
后代选择器
selecter selecter
拆分为两个选择器再计算
通配符选择器
*
0
各种伪类选择器
如:link, :visited, :hover, :active, :target, :root, :not...
10
各种伪元素
如::first-letter,::first-line,::after,::before,::selection
1

(四)权重的基本规则


  • 1、相同的权重:最后面出现的选择器为最后规则
    假如在外部样式表中,同一个CSS规则你写了两次,那么出现在前面的选择器权重低,你的样式会选择后面的样式
  • 2、不同的权重,权重值高则生效
    选择器可能会包含一个或者多个与权重相关的计算点,若经过计算得到的权重值越大,则认为这个选择器的权重高
  • 我们可以利用 ID 来增加选择器权重
(五)对权重规则的总结


  • 一条样式规则的整体权重值包含四个独立的部分:[A, B, C, D]
  • A 表示内联样式,只有 1 或者 0 两个值
  • B 表示规则中 ID 的数量
  • C 表示规则中除了 ID、标签和伪元素以外的其它选择器数量
  • D 表示规则中标签和伪元素的数量
    捷报比分网时从高位到低位(从 A 到 D)南非世界杯决赛比分捷报比分网,高位相同才需要捷报比分网低位


  • !important注意点:
  • 如果多条规则中都对同一个属性指定了 !important,这时候 !important的作用体育即时比分抵销,依然按照ABCD四组计算捷报比分网
  • !important的作用只有在具有唯一性时才能口袋妖怪看球比分,但是我们永远无法预料本身什么时候又需要覆盖一个已经指定了!important的属性,所以最好的办法就是不要使用
(六)CSS 优先级法则


  • A )选择器都有一个权值,权值越大越优先
  • B )当权值相等时,后出现的样式表要优于先出现的样式表设置
  • C )继承(inherit)的CSS 样式优先级低于指定的CSS 样式
  • D )在同一组属性设置中标有“!important”规则的优先级最大


作者:莫可可小姐d远方
链接:https://www.jianshu.com/p/08ca24758675
来源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
回复

使用道具 举报

发表回复

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则


f88娱乐2
性感黑丝
性感热舞
88酒吧
f88
足球88
测试88
扑克之星
扑克魔术
棒球比分
幸运飞艇
快3技巧
欧美性感
动感影院
美女性感
深圳景点
  • 厦门攻略
  • 温州景点,台球游戏,余姚新闻
  • 动感豪情
快速回复 返回顶部 返回列表