之前写页面样式时，有时会遇到 用多条样式定义规则对同一个元素进行样式设置的时候，当时想到的就是  按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. MongoDB pymongo模块 查询

    查询 mongo_db 类似于 服务器命令行的db 我们可以db.user.find() 查询 find() 需要加上列表 import pymongo mongo_client = pymongo. ...

  2. python基础教程 变量/输入输出/if判断

    python的运用越来越多.大数据经常被人谈及,数据从何而来?通过各个平台.app.网站数据的收集,分析,过滤,生成报告,这些都可以用python来处理,并且有很多成熟的库可以直接用了.那还不赶紧深入 ...

  3. mysql报错Multi-statement transaction required more than 'max_binlog_cache_size' bytes of storage

    mysql报错Multi-statement transaction required more than 'max_binlog_cache_size' bytes of storage 在执行cr ...

  4. what's the 回撤

    什么是“回撤”? “回撤”是个谓语,前面隐含了一个主语.一般来说,没有人说“亏损回撤”的,我们说的“回撤”,通常指“股价回撤”.“市值回撤”.“净值回撤”和“盈利回撤”. “股价回撤”是针对个股的,即 ...

  5. 前端框架之Vue(2)-模板语法

    Vue.js 使用了基于 HTML 的模板语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据.所有 Vue.js 的模板都是合法的 HTML ,所以能被遵循规范的浏览器和 HTML 解 ...

  6. 学习Shell（二）变量

    如何给shell脚本传入参数 1.执行“vi test.sh”创建一个新的shell脚本. vi test.sh 2.脚本test.sh的内容如下: #!/bin/sh name=$ echo &qu ...

  7. (转)Springboot邮件服务

    springboot仍然在狂速发展,才五个多月没有关注,现在看官网已经到1.5.3.RELEASE版本了.准备慢慢在写写springboot相关的文章,本篇文章使用springboot最新版本1.5. ...

  8. Linux下fork机制详解（以PHP为例）

    考:https://blog.csdn.net/jason314/article/details/5640969 1.fork简介 一个进程,包括代码.数据和分配给进程的资源.fork()函数通过系统 ...

  9. fasttext与Linear SVC 分类测试结果

    任务:分类出优质问题与非优质问题.任务背景:用户实际与智能客服交互的时候,如果只做阈值限制,在相似问题匹配的时候(由于词的重复),依然会匹配出部分结果.如:问题为 "设置好了?", ...

  10. 天气服务API文档 第1版

    HTTP接口设计文档 此文档为开发HTTP接口的设计文档,目前用于提供天气查询的相关接口. 测试的时候使用 URL=http://www.dennisthink.com/test/api/weathe ...