css的优先级 和 权重
之前写页面样式时,有时会遇到 用多条样式定义规则对同一个元素进行样式设置的时候,当时想到的就是 按css选择器的优先级来搞定这个问题,说实话当时也就只记得 内嵌样式 > id > class > 标签 这样简单的规则,虽然基本可以搞定需求,也自以为然的就是这个样子了,直到前两天有个面试问到了这个问题,我也是按自以为的这个简单规则进行了描述,当问到我是否对“权重”有所了解时,恕我直言,当时就懵了,“权重”是什么鬼,没听过啊,好尴尬....(恕我学习时不太仔细,同仁勿喷哈),作为一名出色的前端工程师,前端的东西怎么还可能有没听过的,在这儿不说面试结果咋样了哈,回来我就发奋图强了,各种查资料 终于了解“权重”是个什么东西,顿时对css选择器优先级的由来有了深一层的认识,下面是我的一些总结,记录一下,加深理解:
1. 权重概念:
权重,是一个相对的概念,是针对某一指标而言。某一指标的权重是指该指标在整体评价中的相对重要程度。
权重系数,是表示某一指标项在指标项系统中的重要程度,它表示在其它指标项不变的情况下,这一指标项的变化,对结果的影响。
2.css权重的理解:
每一个css的选择器都有一个相对的重要程度值,也就是权重的值,简称“权值”;
css通过css选择器的权重占比,来计算css选择规则的总权值,从而确定 定义样式规则的 优先级次序;
从“css权重的理解”中得知,原来所谓为的 css选择规则的优先级 是按照 css选择器的权值的比较 来确定的(可能光看这句还是一头雾水的,不急,看完我接下来介绍 估计你马上会有豁然开朗的感觉,但,请先记住这句话);
3.css优先级规则:
1.css选择规则的权值不同时,权值高的优先;
2.css选择规则的权值相同时,后定义的规则优先;
3. css属性后面加 !important 时,无条件绝对优先;
4. 权值的计算:
网上很容易找到这张图,他描述了css选择器的权值等级划分:
权值等级划分, 一般来说是划分4个等级:
第一等级:代表 内联样式,如 style="",权值为 1,0,0,0;
第二等级:代表 ID选择器,如 #id="", 权值为 0,1,0,0;
第三等级:代表 calss | 伪类 | 属性 选择器,如 .class | :hover,:link,:target | [type], 权值 0,0,1,0;
第四等级:代表 标签 | 伪元素 选择器,如 p | ::after, ::before, ::fist-inline, ::selection, 权值 0,0,0,1;
此外,通用选择器(*),子选择器(>), 相邻同胞选择器(+)等选择器不在4等级之内,所以它们的权值都为 0,0,0,0;
权值计算 公式:
权值 = 第一等级选择器*个数,第二等级选择器*个数,第三等级选择器*个数,第四等级选择器*个数;
权值比较 规则:
当两个权值进行比较的时候,是从高到低逐级将等级位上的权重值(如 权值 1,0,0,0 对应--> 第一等级权重值,第二等级权重值,第三等级权重值,第四等级权重值)来进行比较的,而不是简单的 1000*个数 + 100*个数 + 10*个数 + 1*个数 的总和来进行比较的,换句话说,低等级的选择器,个数再多也不会越等级超过高等级的选择器的优先级的;【为什么这么特别强调呢,因为为在网上查资料的时候,看到好多博客是把这个权重值理解成了所有等级的数字之和了】,说到这里 再 配合下图 大家应该就差不多理解了,
总结,这个比较规则就是三点
1.先从高等级进行比较,高等级相同时,再比较低等级的,以此类推;
2.完全相同的话,就采用 后者优先原则(也就是样式覆盖);
3.css属性后面加 !important 时,无条件绝对优先(比内联样式还要优先);
验证 第一点:
例子:
<!DOCTYPE html>
<html>
<head>
<title>CSS 选择器</title>
<style type="text/css">
#parent p { background-color: red; }
div .a.b.c.d.e.f.g.h.i.j.k p{ background-color: green;
</style>
</head>
<body>
<div id="parent">
<div class="a b c d e f g h i j k">
<p>xxxx</p>
</div>
</div>
</body>
</html>
如果对css权重理解不透彻的话,看到上边的例子,估计会有很大一部分人都会认为最后 p 的背景色是 green; 为什么呢? 因为理解成了错误的权值计算规则
qz1 = 100 + 1 = 101
qz2 = 1 + 10*11 + 1 = 112
qz1 < qz2
所以 第二条样式 优先级高,背景色为 green;
NO,NO,NO....结果却是 背景色为 red;如图:
所以也就印证了,上面所说的权值比较规则 第一条。
验证 第二点:
例子:
<!DOCTYPE html>
<html>
<head>
<title>CSS 选择器</title>
<style type="text/css">
/*
1.先从高等级进行比较,高等级相同时,再比较低等级的,以此类推,
2.完全相同的话,就采用 后者优先原则(也就是样式覆盖),
3.有 !important 时,无条件绝对优先 如下面的 示例:
*/
#parent #child1 {background-color: red;} /* 权值: 0,2,0,0; */
#parent #child1 {background-color: green;} /* 权值: 0,2,0,0; */
</style>
</head>
<body>
<div id="parent">
<div id="child1">xxxxxx</div>
</div>
</body>
</html>
展示效果,如图:
所以也就印证了,上面所说的权值比较规则 第二条;
验证 第三点:
例子:
<!DOCTYPE html>
<html>
<head>
<title>CSS 选择器</title>
<style type="text/css">
/*
1.先从高等级进行比较,高等级相同时,再比较低等级的,以此类推,
2.完全相同的话,就采用 后者优先原则(也就是样式覆盖),
3.有 !important 时,无条件绝对优先 如下面的 示例:
*/
#parent div#child1 { background-color: yellow !important; } /* !important 无条件绝对优先 */
#parent div#child1 {background-color: red;} /* 权值: 0,2,0,1; */
#parent #child1 {background-color: green;} /* 权值: 0,2,0,0; */
</style>
</head>
<body>
<div id="parent">
<div id="child1" style="background-color:orange;">xxxxxx</div> <!-- 权值:1, 0, 0, 0 -->
<div id="child2">xxxxxx</div>
</div>
</body>
</html>
如果没有 !important 的样式规则时,相信大家都知道内联样式的优先级是最高的,背景色为 orange;
加了 !important 之后,没有任何理由的 它的优先级就最高了,背景色为 yellow;
展示效果, 如图:
所以也就印证了,上面所说的权值比较规则 第三条;
5. 选择器的优先级:
通过上边的分析 我们就得出了单个选择器的优先级比较:
css属性!important
》内联样式
》ID选择器(#id)
》类选择器(.class) = 伪类选择器(:hover等) = 属性选择器[type等]
》元素选择器(p等) = 伪元素选择器(:after/:before/::selection等)
》通用选择器(*)
》继承的样式
关于伪类的部分,这篇文章总结还挺好的(尤其是 :not(选择器) 伪类不参与优先级计算,但:not(选择器) 里边的 “选择器” 是参与优先级计算的 这部分),可参考:
地址:https://www.cnblogs.com/starof/p/4387525.html
简单说一下继承:
继承是一种机制,它允许样式不仅可以应用于某个特定的元素,还可以应用于它的后代。例如一个BODY定义了的颜色值也会应用到段落的文本中。下面举例说明:
样式定义:body{ color:red; }
应用举例代码:<p>CSS的<strong>层叠和继承</strong>深入探讨</p>
这段代码的应用结果是:“CSS的层叠和继承深入探讨”这段话是红颜色的,“层叠和继承”由于应用了strong元素,所以是粗体。这很符合制作者的意图,也是为什么继承是CSS的一部分的原因。
我去,又两点半拉,我还没娶媳妇,不想死辣么早,就写这些吧,估计大家通篇读下来,应该也明白的差不多了,还有不理解的地方,欢迎留言哈!!爱生活,爱自己,晚安!!
css的优先级 和 权重的更多相关文章
- css的优先级 和 权重问题 以及 !important 优先级
css的优先级 和 权重问题 以及 !important 优先级 css选择有多少种? 行内样式(style="") id选择器(#) class选择器(类,伪类) 元素选择器(标 ...
- css样式优先级和权重问题
内联样式: <div style="font-size: 12px;">姓名</div> 外部样式: <link rel="styleshe ...
- css的优先级和权重问题 以及!important优先级
一,前言: 刚加的css怎么没有渲染出来?浏览器中查看,发现是被其他的css给覆盖了,相信我们都曾遇到过这样的问题.那么浏览器是如何选择css标签的渲染顺序的呢?换句话说,css选择器的优先级是怎么规 ...
- CSS样式优先级和权重问题(部分)
内联样式: <div style="font-size: 12px;">姓名</div> 外部样式: <link rel="styleshe ...
- CSS选择器的优先级及权重问题【CSS核心问题】及其它属性
1.CSS选择器优先级: !important >行间样式> id >class和属性选择器>标签选择器>通配符选择器 注意:[初级工程师水平] 2. ...
- CSS中选择器优先级的权重计算
CSS中选择器优先级的权重计算 先看一段代码,如下: a{ color: red; } #box a{ color: green; } [class="box"] a{ color ...
- 从webkit内核简单看css样式和css规则优先级(权重)
目录 webkit中样式相关类及类间关系 样式规则匹配 权重(优先级)计算 权重相同时的覆盖原则 webkit中样式相关类及类间关系 资料来源: <webkit技术内幕> 结构相关类: 1 ...
- CSS(二)- 选择器 - 一定要搞懂的选择器优先级和权重问题
css的优先级之前一直没怎么注意没当回事,总以为对同一元素靠后的渲染会覆盖前面的渲染,要是覆盖不了那就来个!important嘛.直到我那在学前端基础的后端伙伴拿一个问题问住了我,我才意识到这是重点中 ...
- css样式权重优先级,css样式优先级
原文:http://www.bkjia.com/Javascri... 样式选择器权重优先级: important > 内嵌样式 > ID > 类 > 标签 | 伪类 | 属性 ...
随机推荐
- ConcurrentHashMap详解
public class ConcurrentHashMap<K,V>extends AbstractMap<K,V>implements ConcurrentMap<K ...
- UIDatePicker封装
#import <UIKit/UIKit.h> #import <objc/runtime.h> @protocol datePickerViewDelegate <NS ...
- Mysql常用的存储引擎
存储引擎 存储引擎是表级别的概念,不同的存储引擎保存数据和索引的方式是不相同的. MyISAM存储引擎 MyISAM最典型的性能问题就是表锁的问题. MyISAM只将数据写到内存中,然后等待操作系统 ...
- 帝国cms建站总结-(分页)
帝国cms分页代码文件t_functions.php 代码为: <?php if(!defined('InEmpireCMS')) { exit(); } define('InEmpireCMS ...
- root_objectlist, root_object, container_objectlist, container_object 之间的关系。
- Spark --- 启动、运行、关闭过程
// scalastyle:off println package org.apache.spark.examples import scala.math.random import org.apac ...
- Java 基础 面向对象和抽象类
面向对象变量 局部变量和成员变量区别 区别一:定义的位置不同 定义在类中的变量是成员变量 定义在方法中或者{}语句里面的变量是局部变量 区别二:在内存中的位置不同 成员变量存储在对内存的对象中 局部变 ...
- shell for 循环数组
name=(aa bb) ;i<${#name[*]};i++)) do name=${name[i]} echo "$name" done
- 如何写一个优秀的GitHub项目README文档?
今天给大家介绍一个Github上的README文档写作教程模版,该模版目前获得6634颗星星,2296Fork,相对而言,还是比较得到大家认可的.不花哨,不别出心裁,一个比较实用的,普适性的架子:所谓 ...
- 利用Tensorflow实现神经网络模型
首先看一下神经网络模型,一个比较简单的两层神经. 代码如下: # 定义参数 n_hidden_1 = 256 #第一层神经元 n_hidden_2 = 128 #第二层神经元 n_input = 78 ...