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. 采用VSPD、ModbusTool模拟串口、MODBUS TCP设备进行Python采集软件开发

    版权声明:本文为博主原创文章,欢迎转载,并请注明出处.联系方式:460356155@qq.com 不少仪器/设备都提供了数据采集的接口,其中不少是串口或网络的MODBUS/TCP协议. 串口是比较简单 ...

  2. mysql之优化(2)

    1.选取最适用的字段属性MySQL可以很好的支持大数据量的存取,但是一般说来,数据库中的表越小,在它上面执行的查询也就会越快.因此,在创建表的时候,为了获得更好的性能,我们可以将表中字段的宽度设得尽可 ...

  3. UIAutomator简介

    简介 Android 4.3发布的时候包含了一种新的测试工具–uiautomator,uiautomator是用来做UI测试的.也就是普通的手工测试,点击每个控件元素 看看输出的结果是否符合预期.比如 ...

  4. 数据降维之多维缩放MDS(Multiple Dimensional Scaling)

    网上看到关于数据降维的文章不少,介绍MDS的却极少,遂决定写一写. 考虑一个这样的问题.我们有n个样本,每个样本维度为m.我们的目标是用不同的新的k维向量(k<<m)替代原来的n个m维向量 ...

  5. vivado place30-378

    AR# 60131 Vivado Placer - [Place 30-378] Input pin of input buffer has an illegal connection to a lo ...

  6. mpvue——API请求封装(小程序原生)

    前言 能用,但不是最好的方法,最好的还是fly,因为为了以后多平台的考虑,最好使用fly.js,做之前先关闭校验合法域名,因为我没在后台进行配置 后台进行配置合法域名,按着官方给的配置就OK了,这里就 ...

  7. Codeforces484 A. Bits

    题目类型:位运算 传送门:>Here< 题意:求区间\([L,R]\)内二进制中1的个数最多的那个数,如果有多解输出最小解 解题思路 想了15min就一遍A了 我们可以贪心地在\(L\)的 ...

  8. FastDFS 分布式文件系统搭建

    安装依赖环境yum install make cmake gcc gcc-c++ pcre-devel zlib-devel perl-devel 安装libfastcommon-master.zip ...

  9. 寒冬之下,移动开发没人要了? 浅谈 iOS 开发者该 何去何从?

    前言: 作者 | 梅梅    文章来源 CSDN 对于移动互联网而言,2018 年像是球场上的一声裁判哨.哨声响起,高潮迭起的上半场结束.本该再创辉煌的下半场,还没开赛却被告之:规则改变.场地收缩.教 ...

  10. 时间函数(1):time,ctime,gmtime,localtime

    asctime(将时间和日期以字符串格式表示) #include<time.h> 定义函数 char * asctime(const struct tm * timeptr); 函数说明 ...