7 选择器优先级

所谓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>css选择器的优先级</title>

</head>

<style>

    /*

    行内选择器:1000  id:100  class:10  标签名:1

    !important

    */

    /*#i1{*/

    /*    color: red;*/

    /*}*/

    /*.c1{*/

    /*    color: gold;*/

    /*}*/

    /*div{*/

    /*    color: blue;*/

    /*}*/

    /*.c2 .c3 .c5{*/

    /*    color: red;*/

    /*}*/

    /* #i2{*/

    /*    color: rebeccapurple;*/

    /* }*/

    /*.c2 .c4 div{*/

    /*    color: green;*/

    /*}*/

    /*.c2 .c3 .c4 div{*/

    /*    color: lightcoral;*/

    /*}*/

    /*.c2 .c4 .c5{*/

    /*    color: lightskyblue;*/

    /*}*/

    /*.c5{*/

    /*     color: chartreuse!important;*/

    /* }*/

</style>

<body>

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

<div class="c2">

    <div class="c3">

        <div class="c4">

            <div class="c5" id="i2" style="color: orange">item</div>

        </div>

    </div>

</div>

</body>

</html>

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

  1. 关于Css选择器优先级

    今天练习css的时候,重叠后的style发现不起作用,原来css选择器优先级大有文章. 声明: yi下内容选自 51cto.com  --加以自己的理解 以备日后参照使用,毕竟自己理解的才是自己的. ...

  2. 深入理解CSS选择器优先级

    题外话 今天把 <CSS REFACTORING>(中文名叫<CSS重构:样式表性能调优>)电子书粗略的浏览了一遍,这本书很薄,150页左右,首先是介绍了什么是重构并举了两个简 ...

  3. CSS选择器优先级（转）

    原文:http://www.cnblogs.com/wangfupeng1988/p/4285251.html 另外,w3c有文章介绍了CSS选择器的特定性,见https://www.w3.org/T ...

  4. day44:CSS选择器优先级&JS基础

      目录 1.CSS选择器优先级 2.补充:margin是可以设置百分比的 3.JS 3.1 js代码的引入方式 3.2 变量 3.3 数据类型 3.4 数组(类似于python中的列表) 3.5 自 ...

  5. 看完就懂--CSS选择器优先级的计算

    CSS选择器优先级的计算 什么是选择器的优先级 优先级的计算与比较(一) - 优先级具有可加性 - 选择器优先级不会超过自身最大数量级 - 同等优先级情况下,后写的覆盖前写的 - 并集选择器之间的优先 ...

  6. CSS选择器优先级总结

    CSS三大特性-- 继承. 优先级和层叠. 继承:即子类元素继承父类的样式; 优先级:是指不同类别样式的权重比较; 层叠:是说当数量相同时,通过层叠(后者覆盖前者)的样式. css选择符分类 首先来看 ...

  7. CSS选择器优先级 CSS权值

    计算指定选择器的优先级:重新认识CSS的权重 标签的权值为 0,0,0,1 类的权值为 0,0,1,0 属性选择的权值为 0,0,1,1  ID的权值为 0,1,0,0 important的权值为最高 ...

  8. 深入理解CSS选择器优先级的计算

    选择器的优先级关系到元素应用哪个样式.在CSS2.1的规范(http://www.w3.org/TR/2009/CR-CSS2-20090908/cascade.html#specificity)中是 ...

  9. 导航栏布局时遇到的问题以及解决办法 css选择器优先级

    得到的导航栏效果 添加#menu ul li{width:30px;} 效果如图 将会使列表项和分隔区域的宽度同时改变因为id选择器的优先级高于类选择器,此时应该为列表项添加内联样式如图 才能得到如下 ...

  10. 前端CSS css引入方式 css选择器 css选择器优先级

    一.       CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素,给HTML设置样式,让它更加美观. 当浏览器读到一个样式表,它就会按照这个样式表 ...

随机推荐

  1. 关于RabbitMQ消费者预取消息数量参数的合理设置

    根据RabbitMQ官方文档描述,可以通过"预取数量"来限制未被确认的消息个数,本质上这也是一种对消费者进行流控的方法. 详见:https://www.rabbitmq.com/c ...

  2. linux下安装nginx（编译安装）及反向代理及负载均衡

    首先卸载掉之前用yum命令下载的nginx yum remove nginx 安装nginx需要的依赖库 yum install -y gcc patch libffi-devel python-de ...

  3. python中动态生成类type的用法

    示例:正常创建类 class Person(object): def __init__(self): self.name = name self.age = age p = Person(" ...

  4. Html飞机大战(十): 消灭敌机

    好家伙,本篇是带着遗憾写完的. 很遗憾,我找了很久,找到了bug但并没有成功修复bug 再上一篇中我们看到 子弹射中了敌机,但是敌机并没有消失,所以这篇我们要来完善这个功能 按照惯例我们来捋一下思路: ...

  5. Unity3D之OnTriggerEnter和OnCollisionEnter

    OnCollisionEnter方法要求碰撞的发起方必须拥有刚体,而被碰撞方有没有刚体并不重要; OnTriggerEnter方法则对此没有要求,只需要碰撞双方有一个具有刚体即可触发,当有物体勾选is ...

  6. 【Azure 事件中心】Event Hub Client 连接超时(OperationTimeout)测试及解说

    Azure Event Hub(Azure事件中心) 是大数据流式处理平台和事件引入服务. 它可以每秒接收和处理数百万个事件.在我们的使用中,需要代码编写的是两个部分:事件生产者和事件接收者 事件生成 ...

  7. 使用 MyBatis 操作 Nebula Graph 的实践

    本文首发于 Nebula Graph Community 公众号 我最近注意到很多同学对于 ORM 框架的需求比较迫切,而且有热心的同学已经捐赠了自己开发的项目,Nebula 社区也在 working ...

  8. Nebula Graph｜信息图谱在携程酒店的应用

    本文首发于 Nebula Graph Community 公众号 对于用户的每一次查询,都能根据其意图做到相应的场景和产品的匹配",是携程酒店技术团队的目标,但实现这个目标他们遇到了三大问题 ...

  9. opencv库图像基础1-python

    opencv库图像基础-python 基本操作 图片颜色通道 非灰度图的颜色通道是红绿蓝,在opencv中默认是BGR的顺序 argparse模块 argparse 库是 Python 标准库中用于命 ...

  10. 1、eureka的注册流程

    客户端注册到服务端是通过http请求的 涉及到多级缓存 register注册表 源码精髓:多级缓存设计思想 在拉取注册表的时候: 首先从ReadOnlyCacheMap里查缓存的注册表. 若没有,就找 ...