css的优先级和权重问题 以及!important优先级
一,前言:
刚加的css怎么没有渲染出来?浏览器中查看,发现是被其他的css给覆盖了,相信我们都曾遇到过这样的问题。那么浏览器是如何选择css标签的渲染顺序的呢?换句话说,css选择器的优先级是怎么规定的?
二、正文:
先上一个例子
<div id = "outerId" class = "outerClass">
<div id = "innererId" class = "innerClass">
<p id = "thisId" class = "thisClass" style = "">这是一个CSS选择器的测试</p>
<button type = "button" class = "buttonClass">按钮</button>
</div>
</div>
问:有多少种css选择器可以对<p>标签样式产生影响呢?
如果详细的进行分析,排列组合有太多种了,太过麻烦。我们就说说有哪几个类别:
- 行内样式: 即 style = "font-size: 12px";
- id选择器: 即 #thisId {font-size: 12px;}
- class选择器: 即 .thisClass {font-size: 12px;}
- 元素选择器: 即 p {font-size: 12px;}
如上四种类别都可以对<p>标签的样式产生影响,那么谁先谁后,谁打谁小呢?
有如下两种解释:
- 一个selector的权重表示方式:0.0.0.0,按照计算规则给每位填充数字,对应位置相等,则比较下一位;
- 也有分别以1000、100、10、1四个权值系数对CSS选择器进行权重计算。
选择器类别 | 说明 | 权重表示 | 权值表示 |
行内样式 | 行内只有一个 style = "" | (1.0.0.0) | 1000 |
id选择器 | selector中使用了几个id,即#的个数 | (0.1.0.0) | 100 |
类选择器 |
类,伪类,以及属性的个数 如: .outerClass .buttonClass[type="button"]:hover{} 选择器中有2个类,1个属性,1个伪类 |
(0.0.1.0) | 10 |
元素选择器 |
伪元素和标签元素的个数,如: p:first-child 选择器中有一个标签元素p和一个伪元素first-child |
(0.0.0.1) | 1 |
张鑫旭大神的256个class类名选择器干掉一个id选择器实例页面 ,我试了下256个好像也不行。。。
最后的几点说明:
!important 表示强制应用该样式,例如:button{ width: 150px !important;},与以上的选择器相遇时,强制使用此样式;
如果比较后权重相同,那么后者覆盖前者,后渲染的胜出;
内联样式 > id选择器样式 > 类选择器样式 > 元素选择器样式;
CSS选择器的使用,应该尽量避免使用 !important 和 内联样式;id通常也是与class区分开使用,前者多用于JS中的结点定位,后者多用于CSS选择器。
重中之重,1000/100/10/1这种权值系数的比较方式只是便于理解,真实情况下10个class并不能逆转1个id。
css的优先级和权重问题 以及!important优先级的更多相关文章
- css的优先级 和 权重问题 以及 !important 优先级
css的优先级 和 权重问题 以及 !important 优先级 css选择有多少种? 行内样式(style="") id选择器(#) class选择器(类,伪类) 元素选择器(标 ...
- CSS选择器的优先级及权重问题【CSS核心问题】及其它属性
1.CSS选择器优先级: !important >行间样式> id >class和属性选择器>标签选择器>通配符选择器 注意:[初级工程师水平] 2. ...
- CSS中选择器优先级的权重计算
CSS中选择器优先级的权重计算 先看一段代码,如下: a{ color: red; } #box a{ color: green; } [class="box"] a{ color ...
- CSS标签类型和样式表继承与优先级
标签类型 块级标签 什么是块级标签:在html中<div>. <p>.h1~h6.<form>.<ul> 和 <li>就是块级元素 块级标签 ...
- css知多少(6)——选择器的优先级
1. 引言 上一节<css知多少(5)——选择器>最后提到,选择器类型过多将导致一些问题,是什么问题呢?咱们直接举例子说明. 上图中,css中的两个选择器都是针对<span>的 ...
- CSS样式设置语法全解,样式优先级、值和单位、字体、文本、块级元素,行内元素,替换元素、非替换元素、display、float、position、table、li、光标、边距边框、轮廓、颜色背景
全栈工程师开发手册 (作者:栾鹏) 一个demo学会css css选择器全解 css操作语法全解 CSS样式设置语法全解: 样式优先级 1. !important标记的样式 > 内联样式(sty ...
- css知多少(6)——选择器的优先级(转)
css知多少(6)——选择器的优先级 1. 引言 上一节<css知多少(5)——选择器>最后提到,选择器类型过多将导致一些问题,是什么问题呢?咱们直接举例子说明. 上图中,css中的两 ...
- HTML+css基础 css选择器 选择器的权重
css选择器 选择器的权重 在css中,哪个选择器的权重高,就走谁的样式 标签选择器的权重是1 class选择器的权重是10 Id选择器的权重是100 行间样式的权重是1000 带有关键字 !imp ...
- html css的内联样式 内部样式表 外部样式表的优先级
http://www.w3school.com.cn/html/html_css.asp 这三种样式是有优先级的,记住他们的优先级:内联式 > 嵌入式 > 外部式,但是嵌入式>外部式 ...
随机推荐
- 使用 commander && inquirer 构建专业的node cli
备注: 比较简单就是使用nodejs 的两个类库帮助我们进行开发而已,具体的使用参考类库文档 1. 项目初始化 a. 安装依赖 yarn init -y yarn add commander in ...
- WINDOWS下kill进程的命令
相信大家都有用命令行(CMD)解决问题的习惯,起码我感觉自己在处理Windows系统故障时越来越离不开Windows PE了,今天我想介绍两个很实用的命令:Tasklist与Tskill.命令:Tas ...
- [LeetCode系列]括号生成问题
给定n, 返回所有匹配的n对括号的可能形式. 如 给定 n = 3, 一个解集是: "((()))", "(()())", "(())()" ...
- fail2ban的介绍
fail2ban的介绍 http://www.jb51.net/article/48591.htm http://lilinji.blog.51cto.com/5441000/1784726 fail ...
- TCP/IP概念简述
这里所说的是广义上的TCP/IP协议群,而不是特指TCP和IP这两种具体的协议.既然是协议群,那么都有哪些协议呢?我们先不着急回答这个问题,因为要弄清楚这个问题,首先得了解另两件事,就是为啥要有这个协 ...
- javascript系列学习----对象相关概念理解
1.构造函数(相对于面向对象编程语言里面的类) 2.对象实例(它是由构造函数构造出来的对象,使用到关键字 new) 3.this关键字(往往是指我们的对象本身) 下面我们来看一个实例: var Per ...
- UML系列图--用例图(转)
UML-Unified Model Language 统一建模语言,又称标准建模语言.是用来对软件密集系统进行可视化建模的一种语言. 在UML系统开发中有三个主要的模型: 功能模型: 从用户的角度展 ...
- Makefile编写 四 函数篇
一.函数的调用语法 函数调用与变量一样,也是以“$”来标识的,其语法如下: $(<function> <arguments>) 或是 ${<function> &l ...
- socket 阻塞,同步、I/O模型
1. 概念理解 在进行网络编程时,我们常常见到同步(Sync)/异步(Async),阻塞(Block)/非阻塞(Unblock)四种调用方式: 同步: 所谓同步,就是在发出一个功能调用时, ...
- postman 请求 页面出现 Could not get any response 解决方法
1.关闭掉证书 2.再关闭掉代理 3.去掉请求头的Content-Length字段 (或者一个个试请求头的值,看去掉那些就请求成功了) 后记: 网友 @ 重庆张晓祥 提供了个线索确实让我想起以前我从浏 ...