文档章节

css权重

羊皮卷
 羊皮卷
发布于 2016/04/19 21:27
字数 302
阅读 69
收藏 8

CSS权重是由四个数值决定,看一张图比较好解释:



图里是英文的,我翻译过来分别说一下,4个等级的定义如下:

第一等:代表内联样式,如: style=””,权值为1000。

第二等:代表ID选择器,如:#content,权值为100。

第三等:代表类,伪类和属性选择器,如.content,权值为10。

第四等:代表类型选择器和伪元素选择器,如div p,权值为1。


最后把这些值加起来,再就是当前元素的权重了。


权重算出来了,但是某个元素到底用哪个样式,还有3个规则,:

1,如果样式上加有!important标记,例如:

p{ color: gray !important}

那么始终采用这个标记的样式。


2,匹配的内容按照CSS权重排序,权重大的优先;

可以看到,CSS权重只是决定应用哪个样式的其中一个步骤,不过这个步骤是最复杂的,上面已经说过了。


3,如果权重也一样,按照它在CSS样式表里声明的顺序,后声明的优先,例如:

h1 {color: blue}
h1 {color: red}

最终胜出的是color: red。





本文转载自:http://my.oschina.net/CodingPeasant/blog/662150

羊皮卷
粉丝 3
博文 166
码字总数 84410
作品 0
广州
前端工程师
私信 提问
你应该知道的一些事情——CSS权重

本文由99根据Vitaly Friedman的《CSS Specificity: Things You Should Know 》所译,整个译文带有我们自己的理解与思想,如果译得不好或不对之处还请同行朋友指点。如需转载此译文,需注明英...

石佛慈悲
2013/12/05
67
0
前端杂谈: CSS 权重 (Specificity)

前端杂谈: CSS 权重 (Specificity) css 权重想必大家都听说过, 一些简单的规则大部分人也都知道: 较长的 css selector 权重会大于较短的 css selector id selector 权重高于 class selector...

ssthouse_hust
2018/11/19
371
1
你对CSS权重真的足够了解吗?

前言 css权重很多人都听过,也了解一些,但是很多人对具体的规则或者说再深如一些关于css权重的问题,可能会不那么清楚。日常开发中,或多或少都会遇到css规则不生效的问题,为了让我们能够减...

OBKoro1
2018/10/29
0
0
CSS样式的权重问题

便于记忆的顺序:“important > 内联 > ID > 类 > 标签 伪类 属性选择 > 伪对象 > 通配符 > 继承”。 参考博文 深入解析CSS样式层叠权重值 深入解析CSS样式层叠权重值 重新认识CSS的权重...

Mobile-DEV彬
2016/04/25
56
0
CSS权重是如何分配的

CSS权重是由四个数值决定,看一张图比较好解释: 图里是英文的,我翻译过来分别说一下,4个等级的定义如下: 第一等:代表内联样式,如: style=””,权值为1000。 第二等:代表ID选择器,如...

我输过但从未怕过
2016/04/19
40
0

没有更多内容

加载失败,请刷新页面

加载更多

PostgreSQL 11.3 locking

rudi
47分钟前
5
0
Mybatis Plus sql注入器

一、继承AbstractMethod /** * @author beth * @data 2019-10-23 20:39 */public class DeleteAllMethod extends AbstractMethod { @Override public MappedStatement injectMap......

一个yuanbeth
今天
8
1
一次写shell脚本的经历记录——特殊字符惹的祸

本文首发于微信公众号“我的小碗汤”,扫码文末二维码即可关注,欢迎一起交流! redis在容器化的过程中,涉及到纵向扩pod实例cpu、内存以及redis实例的maxmemory值,statefulset管理的pod需要...

码农实战
今天
4
0
为什么阿里巴巴Java开发手册中不建议在循环体中使用+进行字符串拼接?

之前在阅读《阿里巴巴Java开发手册》时,发现有一条是关于循环体中字符串拼接的建议,具体内容如下: 那么我们首先来用例子来看看在循环体中用 + 或者用 StringBuilder 进行字符串拼接的效率...

武培轩
今天
8
0
队列-链式(c/c++实现)

队列是在线性表功能稍作修改形成的,在生活中排队是不能插队的吧,先排队先得到对待,慢来得排在最后面,这样来就形成了”先进先出“的队列。作用就是通过伟大的程序员来实现算法解决现实生活...

白客C
今天
78
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部