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. js01-javascript语法标准和数据类型

    语法规则 (1)JavaScript对换行.缩进.空格不敏感. 备注:每一条语句末尾要加上分号,虽然分号不是必须加的,但是为了程序今后要压缩,如果不加分号,压缩之后将不能运行. (2)所有的符号,都是 ...

  2. Pyspark-SQL 官方 API 的一些梳理(上)

    在 Pyspark 操纵 spark-SQL 的世界里借助 session 这个客户端来对内容进行操作和计算.里面涉及到非常多常见常用的方法,本篇文章回来梳理一下这些方法和操作. class pysp ...

  3. ;。【】DAY14、递归,匿名函数

    一.三元运算符 三元运算符也称三目运算符,就是if .....else.....语法糖 前提:if 和 else 只有一条语句 例:a = 20 b = 30 res = a if a > b ...

  4. 转 spring注解式参数校验

    转自: https://blog.csdn.net/jinzhencs/article/details/51682830 转自: https://blog.csdn.net/zalan01408980 ...

  5. SpringBoot整合swagger

    Swagger使用 Swagger有什么用? swagger是一个流行的API开发框架,这个框架以“开放API声明”(OpenAPI Specification,OAS)为基础, 对整个API的开发周 ...

  6. bzoj-1179(缩点+最短路)

    题意:中文题面 解题思路:因为他能重复走且边权都正的,那么肯定一个环的是必须走完的,所以先缩点,在重新建一个图跑最长路 代码: #include<iostream> #include< ...

  7. linux文件目录权限和系统基础优化命令(yum源配置)

    一.用户 1.介绍 我们都知道linux中有root用户和普通用户,但是同样是普通用户,为什么有些用户的权限却不一样呢?其实这就类似于我们的QQ群,root用户就是QQ群主,他拥有最高的权利,想干什么 ...

  8. python doc格式转文本格式

    首先python是不能直接读写doc格式的文件的,这是python先天的缺陷.但是可以利用python-docx (0.8.6)库可以读取.docx文件或.txt文件,且一路畅通无阻. 这样的话,可以 ...

  9. [curl]convert curl to python Ruby

    https://curl.trillworks.com/

  10. Codeforces 1082B Vova and Trophies(前缀+后缀)

    题目链接:Vova and Trophies 题意:给定长度为n的字符串s,字符串中只有G和S,只允许最多一次操作:任意位置的两个字符互换.求连续G的最长长度. 题解:维护pre和pr,nxt和nx. ...