所谓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. 第十篇：异步IO、消息队列

    一.协程 二.异步IO_Gevent 三.协程异步IO操作 四.事件驱动模型 五.IO多路复用 六.异步IO理论 一.回顾 线程 vs 进程 线程:CPU最小调度单位,内存共享: 线程同时修改同一份数 ...

  2. 墨水污染的一角qsnctfwp

    题目附件 在图片中最直接的信息是电话号码,将号码输入到搜索引擎,可以得到该书的出版社为:高等教育出版社. 进入高等教育出版社官网 根据物料号前四位.版次时间.印次时间,在官网中进行图书查询. 结合字数 ...

  3. mysql5.7.20靠谱安装步骤

    首先,我看过网上的其他教程. 其次,很多教程都过时了,或者按照步骤失败,反正我一次也没成功. 开始正题:首先,以管理员身份运行cmd 总共就两个命令: 1.mysqld --initialize-in ...

  4. 网易云音乐基于 Flink + Kafka 的实时数仓建设实践

    一.背景介绍 (一)流平台通用框架 目前流平台通用的架构一般来说包括消息队列.计算引擎和存储三部分,通用架构如下图所示.客户端或者 web 的 log 日志会被采集到消息队列:计算引擎实时计算消息队列 ...

  5. Dapr 在阿里云原生的实践

    简介: Faas 场景下,比较吸引用户的是成本和研发效率,成本主要通过按需分配和极致的弹性效率来达成.而应用开发者期望通过 FaaS 提供多语言的编程环境,提升研发效率,包括启动时间.发布时间.开发的 ...

  6. [CosmWasm] 安装 Rust 和 wasm32 (Linux & Mac)

      先用 rustup 安装 Rust 语言,再确保你拥有wasm32目标. $ rustup default stable $ cargo version # If this is lower th ...

  7. IDA动态调试快捷键

    1. F2下断点2. F7进入函数,F8单步调试,F9跳到下一个断点,F2下断点,G调到函数地址3. N重名4. g跳到地址和函数名5. u取消把函数汇编变成机器码6. c就是把机器码变成汇编7. F ...

  8. k8s对接Ceph实现持久化存储(16)

    一.Ceph简介 官网:https://ceph.com/en/ https://docs.ceph.com/en/latest/start/intro/ ceph 是一种开源的分布式的存储系统 包含 ...

  9. 第二讲 Cadence建立工程和元件库

    第二讲 Cadence建立工程和元件库 1．创建工程,设置图纸参数.Design Entry CIS / Orcad Capture CIS / Option /Design Template,可以设 ...

  10. 通过虚拟机镜像部署zabbix

    前言 由于基础镜像的缘故,zabbix部署过程中很可能出现各种缺少依赖包的情况,如果环境中又无法连接互联网,系统部署会非常麻烦.为此zabbix官方提供了虚拟机镜像,导入后可以直接在平台上拉起虚拟机, ...