之前写页面样式时，有时会遇到 用多条样式定义规则对同一个元素进行样式设置的时候，当时想到的就是  按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的优先级 和 权重的更多相关文章

  1. css的优先级 和 权重问题 以及 !important 优先级

    css的优先级 和 权重问题 以及 !important 优先级 css选择有多少种? 行内样式(style="") id选择器(#) class选择器(类,伪类) 元素选择器(标 ...

  2. css样式优先级和权重问题

    内联样式: <div style="font-size: 12px;">姓名</div> 外部样式: <link rel="styleshe ...

  3. css的优先级和权重问题 以及!important优先级

    一,前言: 刚加的css怎么没有渲染出来?浏览器中查看,发现是被其他的css给覆盖了,相信我们都曾遇到过这样的问题.那么浏览器是如何选择css标签的渲染顺序的呢?换句话说,css选择器的优先级是怎么规 ...

  4. CSS样式优先级和权重问题（部分）

    内联样式: <div style="font-size: 12px;">姓名</div> 外部样式: <link rel="styleshe ...

  5. CSS选择器的优先级及权重问题【CSS核心问题】及其它属性

    1.CSS选择器优先级:    !important >行间样式> id >class和属性选择器>标签选择器>通配符选择器        注意:[初级工程师水平] 2. ...

  6. CSS中选择器优先级的权重计算

    CSS中选择器优先级的权重计算 先看一段代码,如下: a{ color: red; } #box a{ color: green; } [class="box"] a{ color ...

  7. 从webkit内核简单看css样式和css规则优先级(权重)

    目录 webkit中样式相关类及类间关系 样式规则匹配 权重(优先级)计算 权重相同时的覆盖原则 webkit中样式相关类及类间关系 资料来源: <webkit技术内幕> 结构相关类: 1 ...

  8. CSS（二）- 选择器 - 一定要搞懂的选择器优先级和权重问题

    css的优先级之前一直没怎么注意没当回事,总以为对同一元素靠后的渲染会覆盖前面的渲染,要是覆盖不了那就来个!important嘛.直到我那在学前端基础的后端伙伴拿一个问题问住了我,我才意识到这是重点中 ...

  9. css样式权重优先级，css样式优先级

    原文:http://www.bkjia.com/Javascri... 样式选择器权重优先级: important > 内嵌样式 > ID > 类 > 标签 | 伪类 | 属性 ...

随机推荐

  1. 解决无法连接到 reCAPTCHA 服务

    今天ytkah在查询一个信息时需要人机验证,但提示“无法连接到 reCAPTCHA 服务”,通过修改host文件可以解决相关问题,用editplus或notepad打开C:\Windows\Syste ...

  2. 20180824 SSRS Line Chart 绘制

    (很多时候我都会只记录遇到的问题点,很少详细的写整个过程) 1. 安装ReportBulider 客户端,不需要填写server url ,可以先放空,后面再维护. 安装包官网可以下载,是免费的,现在 ...

  3. Sql server 2016 Always On 搭建Windows集群配置

    .安装WSFC群集组件 1)打开服务器管理器,选择“功能”,在右边窗口中点击“添加功能”. 2)在添加功能向导中,勾选“故障转移群集”,点击“下一步”. 3)在“确认安装选择”页面中,点击“安装”,进 ...

  4. MySQL准入规范及容量评估

    一.数据库设计 1.表结构设计 -表中的自增列(auto_increment属性)推荐使用bigint类型 -首选使用非空的唯一键, 其次选择自增列或发号器 不使用更新频繁的列,尽量不选择字符串列,不 ...

  5. 【C++问题整理】

    一.static   1.作用:    静态变量/函数:在整个文件内可见,不会被其他文件所用:静态变量:会被自动初始化为0: 类中的静态变量:类的成员,类对象公用 类中的静态函数:只能访问静态变量 2 ...

  6. localhost/get/user.json localhost/get/user.xml

    我也是引入了jackson-dataformat-xml这个依赖,它是提供了jackson将实体类转化为xml相关的作用.而本身jackson是可以将实体类转化为json的,所以这样Jackson是可 ...

  7. 利用 SPL 快速实现 Observer 设计模式

    目录: 1.什么是 SPL 2.SplSubject 和 SplObserver 接口 3.为什么使用 SplObjectStorage 类 4.模拟案例 5.结束语 6.下载资源 什么是 SPL S ...

  8. nginx的访问控制

    一.基于Basic Auth认证与基于IP的访问控制 一.基于Basic Auth认证 Nginx提供HTTP的Basic Auth功能,配置了Basic Auth之后,需要输入正确的用户名和密码之后 ...

  9. Marathon1.5以上版本配置

    今天部署marathon还按照之前的方式配置,结果启动时报错 Dec 03 23:51:36 bigdata01.zetyun.com marathon[12311]: No start hook f ...

  10. Java 基础 面向对象和抽象类

    面向对象变量 局部变量和成员变量区别 区别一:定义的位置不同 定义在类中的变量是成员变量 定义在方法中或者{}语句里面的变量是局部变量 区别二:在内存中的位置不同 成员变量存储在对内存的对象中 局部变 ...