CSS选择器权重计算
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选择器权重计算的更多相关文章
- 前端极易被误导的css选择器权重计算及css内联样式的妙用技巧
记得大学时候,专业课的网页设计书籍里面讲过css选择器权重的计算:id是100,class是10,html标签是5等等,然后全部加起来的和进行比较... 我只想说:真是误人子弟,害人不浅! 最近,在前 ...
- CSS 选择器权重计算规则
其实,CSS有自己的优先级计算公式,而不仅仅是行间>内部>外部样式:ID>class>元素. 一.样式类型 1.行间 <h1 style="font-size: ...
- CSS 选择器权重计算规则(转)
其实,CSS有自己的优先级计算公式,而不仅仅是行间>内部>外部样式:ID>class>元素. 一.样式类型 1.行间 <h1 style="font-size: ...
- CSS选择器权重计算规则
从CSS代码存放位置看权重优先级:内嵌样式 > 内部样式表 > 外联样式表.其实这个基本可以忽视之,大部分情况下CSS代码都是使用外联样式表. 从样式选择器看权重优先级:important ...
- css系列,选择器权重计算方式
CSS选择器分基本选择器(元素选择器,类选择器,通配符选择器,ID选择器,关系选择器), 属性选择器,伪类选择器,伪元素选择器,以及一些特殊选择器,如has,not等. 在CSS中,权重决定了哪些CS ...
- css选择器权重、样式继承、默认样式
学过css的小伙伴都是指css选择器的权重 !important Infinity 行间样式 1000 id 100 class|属性|伪类 10 标签|伪元素 1 通配符 0 权重相同 相同cs ...
- CSS选择器优先级计算
优先级从高到低排列,浏览器优先满足前面的规则 1,!important优先级最高 2,内联样式 3,作者>读者>浏览器 4,优先级权重加法 id选择器+100/个 类/伪类选择器+10/个 ...
- css选择器权重问题
important infinity 行间样式 1000(256进制) id 100 class/属性/伪类 10 标签/伪元素 1 通配符 0
- 常见CSS选择器的权重和优先级
一.常见CSS选择器 [元素选择器] 1.通配选择器:*(匹配所有元素) a.效率不高,页面上的标签越多,效率越低,所以页面上最好不要出现这个选择器 2.标签选择器:li(匹配标签为li的元素) a. ...
随机推荐
- Spring 使用纯注解方式完成IoC
目录 创建一个简单的Person类 使用xml方式配置Spring容器并获取bean的过程 创建xml配置文件 进行测试 使用纯注解方式配置Spring容器并获取bean的过程 创建spring配置类 ...
- 《Effective C++》实现:条款26-条款31
条款26:尽可能延后变量定义式的出现时间 C++推荐在使用对象前才定义对象(调用构造函数赋初值) 只在循环中使用的变量定义在循环内部(除非"赋值"成本低于"构造+析构&q ...
- mysql千万级数据优化查询
我们在做一个项目,一个网站或一个app时,用户量巨增,当使用的mysql数据库中的表数据达到千万级时,可以从以下方面考滤优化: 1.在设计数据库表的时候就要考虑到优化 2.查询sql语句上的优化 3. ...
- ES-6常用语法和Vue初识
一.ES6常用语法 1.变量的定义 1. 介绍 ES6以前 var关键字用来声明变量,无论声明在何处都存在变量提升这个事情,会提前创建变量. 作用域也只有全局作用域以及函数作用域,所以变量会提升在函数 ...
- Vivado寄存器初始值问题
前言 本复位只针对Vivado中的寄存器复位. 什么时候需要复位?到底要不要复位?怎么复位?复位有什么卵用? 该复位的寄存器需要复位,复位使得寄存器恢复初始值,有的寄存器并不需要复位(数据流路径上). ...
- xadmin 组件拓展自定义使用
xadmin 组件相关可选自定义字段 list_display 功能 设置默认的显示字段(列) 配置 list_display = ['name', 'desc', 'detail', 'degree ...
- 利用ESLINT进行js 语法检查,以及局部安装时遇到的一些坑
1)安装ESlint,这里我说一下全局安装,一会我会说我为什么不局部安装. npm install eslint -g 2)创建一个你的项目文件夹,随便起个名字吧,并初始化 cd myapp npm ...
- Openresty安装及使用配置(OPENRESTY+NGINX)
Openresty 简介 Openresty是一个基于NGINX和Lua的高性能Web平台,内部有大量的Lua库和第三方模块,能够很方便的搭建处理高并发,扩展性高的Web平台和动态网关,充分利用 Ng ...
- [报错]java.lang.ClassCastException
Caused by: java.lang.ClassCastException: org.apache.xml.dtm.ref.DTMManagerDefault cannot be cast to ...
- Nginx常用的平滑重启
之前在做运维工作中,经常需要添加虚拟主机,或者添加修改配置文件,但是测试环境还好,随便玩,如果是生产环境的话,既要保证配置不出问题,有不能中断服务.如果是这样的话,就需要对配置文件进行语法检测以及平滑 ...