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(Ubuntu)使用日记------ssh远程登录腾讯云

    不知道是我自己电脑的问题还是其他的问题.总之在我的折腾之下算是用ssh连接上了我的腾讯云. 具体步骤: 1.生成密钥 ssh-keygen -t rsa 执行命令会出现这样,执行后让你输入东西的全部回 ...

  2. [模板] 平衡树: Splay, 非旋Treap, 替罪羊树

    简介 二叉搜索树, 可以维护一个集合/序列, 同时维护节点的 \(size\), 因此可以支持 insert(v), delete(v), kth(p,k), rank(v)等操作. 另外, prev ...

  3. java 将保单数据 生成图片

    主要代码:---------------------------------------------------------------- /** * 生成图片 * @param cellsValue ...

  4. Django_rbac_demo 权限控制组件框架模型

    rbac 权限控制组件 基于角色的权限控制 本质每个权限即为一个 URL 项目组件结构 表结构 Role (title, permission) -(ManyToManyField)-   User  ...

  5. P3455 [POI2007]ZAP-Queries(莫比乌斯反演)

    题目 P3455 [POI2007]ZAP-Queries 解析 莫比乌斯反演. 给定\(n\),\(m\),\(d\),求\[\sum_{i=1}^{n}\sum_{j=1}^{m}[gcd(i,j ...

  6. 「洛谷1884」「USACO12FEB」过度种植【离散化扫描线】

    题目链接 [洛谷传送门] 题解 矩阵面积的并模板.(请求洛谷加为模板题) 很明显是要离散化的. 我们将矩阵与\(x\)轴平行的两个线段取出来.并且将这两个端点的\(x1\)和\(x2\)进行离散化. ...

  7. vscode设置python3.7调试环境(已更新)

    汇总系列:https://www.cnblogs.com/dunitian/p/4822808.html#ai CentOS安装Python3.7:https://www.cnblogs.com/do ...

  8. python集合(set)的运算

    1.交集 In [1]: a = {1,2,3,4} In [2]: b = {3,4,5,6} In [3]: a & b Out[3]: {3, 4} In [4]: a.intersec ...

  9. docker的安装与基本使用

    安装docker curl -s https://get.docker.com|sh 好慢....一个小时吧... 启动docker 先执行命令docker version来来一下: docker v ...

  10. Node.js实战项目学习系列(1) 初识Node.js

    前言 一直想好好学习node.js都是半途而废的状态,这次沉下心来,想好好的学习下node.js.打算写一个系列的文章大概10几篇文章,会一直以实际案例作为贯穿的学习. 什么是node Node.js ...