CSS各种选择器的权重:

1.ID选择器  +100

2.类、属性、伪类选择器   +10

3.元素、伪元素选择器   +1

4.其他选择器   +0

如果有两个CSS样式都作用于某元素,如:

#id .link a[href] ----- #id(100) + .link(10) +a(1) + [href](0) = 111

#id .link.active  ----- #id(100) + .link(10) + .active(10) = 120

显然,下面的权重比上面的高,那么如果有相同的样式属性,下面的会覆盖掉上面的

需要注意的是,如果有:

#id

.c1.c2.c3.c4.c5.c6.c7.c8.c9.c10.c11

即使下面的算出来的值要比上面的大,但是上面的优先级依然比下面的高

补充:

!important 的优先级最高;

内联样式比在样式表写的样式优先级高;

相同权重的后写的优先级更高

CSS选择器权重计算的更多相关文章

  1. 前端极易被误导的css选择器权重计算及css内联样式的妙用技巧

    记得大学时候,专业课的网页设计书籍里面讲过css选择器权重的计算:id是100,class是10,html标签是5等等,然后全部加起来的和进行比较... 我只想说:真是误人子弟,害人不浅! 最近,在前 ...

  2. CSS 选择器权重计算规则

    其实,CSS有自己的优先级计算公式,而不仅仅是行间>内部>外部样式:ID>class>元素. 一.样式类型 1.行间 <h1 style="font-size: ...

  3. CSS 选择器权重计算规则(转)

    其实,CSS有自己的优先级计算公式,而不仅仅是行间>内部>外部样式:ID>class>元素. 一.样式类型 1.行间 <h1 style="font-size: ...

  4. CSS选择器权重计算规则

    从CSS代码存放位置看权重优先级:内嵌样式 > 内部样式表 > 外联样式表.其实这个基本可以忽视之,大部分情况下CSS代码都是使用外联样式表. 从样式选择器看权重优先级:important ...

  5. css系列,选择器权重计算方式

    CSS选择器分基本选择器(元素选择器,类选择器,通配符选择器,ID选择器,关系选择器), 属性选择器,伪类选择器,伪元素选择器,以及一些特殊选择器,如has,not等. 在CSS中,权重决定了哪些CS ...

  6. css选择器权重、样式继承、默认样式

    学过css的小伙伴都是指css选择器的权重 !important Infinity 行间样式 1000 id   100 class|属性|伪类 10 标签|伪元素 1 通配符 0 权重相同 相同cs ...

  7. CSS选择器优先级计算

    优先级从高到低排列,浏览器优先满足前面的规则 1,!important优先级最高 2,内联样式 3,作者>读者>浏览器 4,优先级权重加法 id选择器+100/个 类/伪类选择器+10/个 ...

  8. css选择器权重问题

    important infinity 行间样式 1000(256进制) id 100 class/属性/伪类 10 标签/伪元素 1 通配符 0

  9. 常见CSS选择器的权重和优先级

    一.常见CSS选择器 [元素选择器] 1.通配选择器:*(匹配所有元素) a.效率不高,页面上的标签越多,效率越低,所以页面上最好不要出现这个选择器 2.标签选择器:li(匹配标签为li的元素) a. ...

随机推荐

  1. Linux--虚拟环境

    一 . 虚拟环境的安装 如果我们在进行多个django项目的话,只用一个物理环境的话,那么会影响效率,这时候我们局可以应用虚拟环境了 virtualenv #指定清华源下载pip的包 pip3 ins ...

  2. less的基本使用

    众所周知,less是一门css预处理语言,其他的类似还有scss.Stylus 等,和js相似度比较高的就是less了.话不多说,我们来看less的使用. Node.js 环境中使用 Less : n ...

  3. 7.docker日志收集

    默认情况下,docker logs或者docker service logs显示命令的输出,就像在终端中以交互方式运行命令时一样.UNIX和Linux命令通常开在运行时间上三个I / O流,所谓的 S ...

  4. ibufds原语

    低压差分传送技术是基于低压差分信号(Low Volt-agc Differential signaling)的传送技术,从一个电路板系统内的高速信号传送到不同电路系统之间的快速数据传送都可以应用低压差 ...

  5. springdata jpa 原始sql的使用

  6. 【题解】放球游戏A

    题目描述 校园里在上活动课,Red和Blue两位小朋友在玩一种游戏,他俩在一排N个格子里,自左到右地轮流放小球,每个格子只能放一个小球.每个人一次只能放1至5个球,最后面对没有空格而不能放球的人为输. ...

  7. 关于【Webpack】的入门使用

    注:节选自http://www.jianshu.com/p/42e11515c10f 1.安装 Webpack可以使用npm安装,新建一个空的练习文件夹(此处命名为webpack sample pro ...

  8. mysql 如何优化left join

    今天遇到一个left join优化的问题,搞了一下午,中间查了不少资料,对MySQL的查询计划还有查询优化有了更进一步的了解,做一个简单的记录: select c.* from hotel_info_ ...

  9. 深入理解ES6箭头函数中的this

    简要介绍:箭头函数中的this,指向与一般function定义的函数不同,比较容易绕晕,箭头函数this的定义:箭头函数中的this是在定义函数的时候绑定,而不是在执行函数的时候绑定. 1.何为定义时 ...

  10. [PA2014]Druzyny

    题目描述 体育课上,n个小朋友排成一行(从1到n编号),老师想把他们分成若干组,每一组都包含编号连续的一段小朋友,每个小朋友属于且仅属于一个组.第i个小朋友希望它所在的组的人数不多于d[i],不少于c ...