关于css权重那些事情

css权重与计算

昨晚上老师讲css知识点，一直觉得这老师上课不好玩也没听他上课，然后他点名问我css啥啥啥样式怎么怎么样，我当时直接懵了

我上课没听课，当时还在看java书，况且您老人家啷个就突然间点我名，后来不是没回答上问题嘛，不好意思不听课了，结果老师有讲到css权重，直接一脸懵，当时想着回去自己在学习一下这个css权重，但是奈何游戏太香，打了两把游戏就瞌睡

罪过罪过，得出三条结论：

1、上课还是要好好听课，老师其实很优秀的啦

2、游戏很香，我觉得我再打下去肯定上青铜，实力杠杠的

3、学java的童鞋真的要秃头

（写这个主要让自己下次总结学习知识要点时候能想起我今天的忏悔）

言归正传还是看权重

多条样式定义规则对同一个元素进行样式设置的时候，这时候不能按照css选择器的优先级来判断，用权重

权重它规定了css定义样式的优先级次序；

而优先级顺序根据 css选择器的权重值的比较来确定的，权重值可以看这个表格和例子

知识点

标签选择器	权重等级
继承或者*	0，0，0，0
每个元素（标签选择器）	0，0，0，1
每个类，伪类(class\|伪类\|属性选择器)	0，0，1，0
每个ID	0，1，0，0
每个行内样式style=""	1，0，0，0
每个!important	无穷大

这里的四个数（0，1）我们只是为了方便识辨权重等级在个位，十位，百位，千位才这样子写的，不要误解，所以在这里数位之间没有进制，级别之间不可超越（四个数单纯看作是个位，十位，百位，千位）

1、值从左到右，左边最大，一级大于一级

2、数位之间没有进制，比如 0,0,0,5 + 0,0,0,5 = 0,0,0,10而不是 0,0,1,0 所以不存在10个div能赶上一个类选择器

3、继承的权重是0

4、通用选择器（*），子选择器（>），相邻同胞选择器（+）等选择器不在4等级之内，所以它们的权值都为 0,0,0,0

例子

<head><style>/*0,0,1,2
div p都是标签选择器,所以在个位上是2  因为.two是类，所以是1*/div.two p{color: purple;}/*0,0,1,1*/.one p{color: green;}/*0,0,0,2  div p都是标签选择器，有两个标签选择器，所以是2*/div p{color: red;}/*0,1,0,0*/#four{color: yellow;}</style></style>
</head><body><div class="one"><div class="two"><p>two的内容</p></div><p>one的内容</p></div>
</body>

这里所给出的例子当中其实还涉及到权重个数，这里虽然用了数学加法，但是比较时候跟这个加法无关（只是为了方便识辨这是属于哪一种css优先级中的第几种优先级才使用的，换句话说，低等级的选择器，个数再多也不会越等级超过高等级的选择器的优先级的

总结

css优先级规则：

1.css选择规则的权值不同时，权重值高的优先；权重值指下面①到⑦的先后顺序

①css属性!important

②内联样式

③ID选择器(#id)

④类选择器(.class) = 伪类选择器(:hover等) = 属性选择器[type等]

⑤元素选择器(p等) = 伪元素选择器(:after/:before/::selection等)

⑥通用选择器(*)

⑦继承

2.css选择规则的权值相同时，后定义的规则优先（可以理解为后者把前者覆盖住了）

3. css属性后面加 !important 时，无条件绝对优先

关于css权重那些事情相关推荐

你应该知道的一些事情——CSS权重
本文由99根据Vitaly Friedman的<CSS Specificity: Things You Should Know >所译,整个译文带有我们自己的理解与思想,如果译得不好或不对 ...
深入理解CSS权重(优先级)
对于上一篇:你应该知道的一些事情--CSS权重 ,实战时会遇到一些实际的问题,本篇继续加重对css优先级的理解.最近跟公司同事分享session时在谈到CSS优先级权重问题,引入了之前一直在网上公认的 ...
html5类选择器选择权重,Python Html5和CSS3的新增功能：CSS权重与CSS3新增选择器
一.CSS权重概念 CSS权重概念:指的是样式的优先级,有两条或多条样式作用于一个元素,权重高的那条样式对元素起作用,权重相同的,后写的样式会覆盖前面写的样式. 二.权重的等级 2.1.权重的等级划分 ...
css权重计算方法浅谈
在这之前只知道css权重的皮毛,比如说:行内权重比头部权重高,头部比外部样式权重高----工作中才知道真正理解css权重重要性.理解权重了才能写出来最优css选择器来.对后面学习less,scss有很 ...
CSS权重的等级划分
CSS权重 CSS权重指的是样式的优先级,有两条或多条样式作用于一个元素,权重高的那条样式对元素起作用,权重相同的,后写的样式会覆盖前面写的样式. 权重的等级可以把样式的应用方式分为几个等级,按照等 ...
html css控制优先级,css权重及优先级问题_html/css_WEB-ITnose
css权重及优先级问题几个值的对比初始值指定值计算值应用值 CSS属性的指定值 (specified value)会通过下面3种途径取得: 在当前文档的样式表中给这个属性赋的值,会被优先使 ...
【HTML/CSS】CSS权重、继承及引入方式
1 CSS权重 1.1 权重规则 CSS匹配的选择器中每一种选择器类型的数组决定了选择器的权重,CSS的优先级规则: 权重高的样式会被应用到元素上. 如果权重相同则使用最后声明的样式. 属性后加上!i ...
css权重是什么？css权重的介绍
本篇文章给大家带来的内容是关于css权重是什么?css权重的介绍,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. --各位小伙伴在进阶的时候总会遇到一些问题和瓶颈,业务代码写多了没有方 ...
css 权重及！important
在编写css样式的时候,我们会时常碰到自己写的样式没有生效,尤其是引用一些外部框架的时候,这种情况更容易发生. CSS样式的优先级按照官方的表述,css优先级如下: 通用选择器(*) < 元素 ...

关于css权重那些事情

css权重与计算

知识点

例子

总结

关于css权重那些事情相关推荐

最新文章

热门文章