所谓CSS优先级，即是指CSS样式在浏览器中被解析的先后顺序。样式表中的特殊性描述了不同规则的相对权重。

!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性

1 内联样式表的权值最高               style=""           1000；

2 统计选择符中的ID属性个数。         #id                100

3 统计选择符中的CLASS属性个数。      .class             10

4 统计选择符中的HTML标签名个数。     标签名              1

按这些规则将数字符串逐位相加，就得到最终的权重，然后在比较取舍时按照从左到右的顺序逐位比较。

　　

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

            .c1{

                color: red;

            }

            #i1{

                color: coral;

            }

            div{

                color: greenyellow;

            }

            /*.c2 .c3 .c4 span{*/

            /*    color: orange;*/

            /*}*/

            .c2 .c4 span{

                color: blue;

            }

            .c2 .c3 .c5{

                color: rebeccapurple;

            }

            .c2 .c4 .c5{

                color: darkcyan;

            }

    </style>

</head>

<body>

<div class="c1" id="i1">item1</div>

<div class="c2">

    <div class="c3">

        <div class="c4">

            <span class="c5">item2</span>

        </div>

    </div>

</div>

</body>

</html>

　　

1、有!important声明的规则高于一切。

2、如果!important声明冲突，则比较优先权。

3、如果优先权一样，则按照在源码中出现的顺序决定，后来者居上。

4、由继承而得到的样式没有specificity的计算，它低于一切其它规则(比如全局选择符*定义的规则)。

5、用数字表示只是说明思想，一万个class也不如一个id权值高

　　

CSS——选择器的优先级的更多相关文章

  1. CSS选择器以及优先级与匹配原理

    最常用的五类CSS选择器 准确而简洁的运用CSS选择器会达到非常好的效果.我们不必通篇给每一个元素定义类(class)或ID,通过合适的组织,可以用最简单的方法实现同样的效果.在实际工作中,最常用的选 ...

  2. CSS选择器、优先级与匹配原理（转）

    CSS选择器.优先级与匹配原理 导航 为了分析Bootstrap源码,所以的先把CSS选择器相关的东东给巩固好 废话就不多说了 CSS 2.1 selectors, Part 1 计算指定选择器的优先 ...

  3. 详解CSS选择器、优先级与匹配原理

    原文链接:http://polaris1119.javaeye.com/blog/764428 作为一个Web开发者,掌握必要的前台技术也是很重要的,特别是在遇到一些实际问题的时候.这里给大家列举一个 ...

  4. 转载：详解CSS选择器、优先级与匹配原

    转载网址:http://polaris1119.javaeye.com/blog/764428 文章就CSS选择器的优先级问题做了一些总结,严格来讲,选择器的种类可以分为三种:标签名选择器.类选择器和 ...

  5. CSS选择器、优先级和匹配原理

    作为一个Web开发者,掌握必要的前台技术也是很重要的,特别是在遇到一些实际问题的时候.这里给大家列举一个例子: 给一个p标签增加一个类(class),可是执行后该class中的有些属性并没有起作用.通 ...

  6. 详解CSS选择器、优先级与匹配原理【转】

    作为一个Web开发者,掌握必要的前台技术也是很重要的,特别是在遇到一些实际问题的时候.这里给大家列举一个例子: 给一个p标签增加一个类(class),可是执行后该class中的有些属性并没有起作用.通 ...

  7. （转）css选择器及其优先级

    文章主要介绍什么是CSS选择器,CSS选择器的分类以及CSS选择器的优先级三部分内容,希望能够帮助到正在学习CSS的童鞋,有什么不足的地方欢迎大家批评指正. 一.什么是CSS选择器? CSS选择器又被 ...

  8. CSS 选择器及优先级

    CSS 选择器及优先级 1.根据权值计算 div .class1 #people的权值等于1+10+100=111 .class2 li #age的权值等于10+1+100=111 2.权值相同,那么 ...

  9. CSS选择器、优先级与匹配原理

    为了分析Bootstrap源码,所以的先把CSS选择器相关的东东给巩固好 废话就不多说了 CSS 2.1 selectors, Part 1 计算指定选择器的优先级:重新认识CSS的权重 标签的权值为 ...

  10. CSS选择器及其优先级

    一:一些普通的选择器 <!DOCTYPE html> <html> <head lang="en"> <meta charset=&quo ...

随机推荐

  1. redis 简单整理——缓存设计[三十二]

    前言 简单整理一下缓存设计. 正文 缓存的好处: ·加速读写:因为缓存通常都是全内存的(例如Redis.Memcache),而 存储层通常读写性能不够强悍(例如MySQL),通过缓存的使用可以有效 地 ...

  2. c# mvc 移除多于的视图引擎

    前言 在我们的mvc中,我们又很多视图引擎是不需要的.为什么这么说呢? 我们知道计算机玩的就是遍历. 上图中我们可以看到,首先找的是index.aspx,因为我们都是cshtml,那么去映射的时候呢每 ...

  3. mysql 重新整理——性能下降的原因[四]

    前言 什么是性能下降? 其实就是代码运行的环境变了,那么环境变化是什么? 比如cpu上升了,内存满了.有或者表中数量增加了,量变了. 其实这些是dba干的,但是呢,我们也需要去了解下,并且优化我们的c ...

  4. arp 的基础概念

    前言 打算整理网络这一块,先把概念写完. 就是有一个问题,那就是为什么有ip地址还有mac地址呢? 原因是这样子的,我们知道ip协议是第三层,那么有一个问题了,如果只有第三层的ip是否能过识别到主机? ...

  5. Linux下安装配置OpenResty服务器

    OpenResty是一款基于Nginx和Lua的高性能Web平台,在nginx基础之上集成了大量的lua库,第三方模块等,以便搭建各种处理高并发.可扩展的Web应用.服务或网关,并且OpenResty ...

  6. 力扣745(java&python)-达到终点数字（中等）

    题目: 在一根无限长的数轴上,你站在0的位置.终点在target的位置. 你可以做一些数量的移动 numMoves : 每次你可以选择向左或向右移动.第 i 次移动(从  i == 1 开始,到 i ...

  7. Redis消息队列发展历程

    ​简介:Redis是目前最受欢迎的kv类数据库,当然它的功能越来越多,早已不限定在kv场景,消息队列就是Redis中一个重要的功能.Redis从2010年发布1.0版本就具备一个消息队列的雏形,随着1 ...

  8. 独家深度 | 一文看懂 ClickHouse vs Elasticsearch：谁更胜一筹？

    简介: 本文的主旨在于通过彻底剖析ClickHouse和Elasticsearch的内核架构,从原理上讲明白两者的优劣之处,同时会附上一份覆盖多场景的测试报告给读者作为参考. 作者:阿里云数据库OLA ...

  9. 如何避免 Go 命令行执行产生“孤儿”进程？

    简介: 在 Go 程序当中,如果我们要执行命令时,通常会使用 exec.Command ,也比较好用,通常状况下,可以达到我们的目的,如果我们逻辑当中,需要终止这个进程,则可以快速使用 cmd.Pro ...

  10. [Blockchain] (Binance Smart Chain) BSC 测试网 BNB 水龙头

    测试网BNB水龙头 https://testnet.binance.org/faucet-smart 测试网区块浏览器 https://testnet.bscscan.com 主网区块浏览器 http ...