1.类的覆盖顺序和应用的时候引用的顺序没关系,覆盖顺序取决于类定义的顺序
    例如:
    .a{
color:red
}
.b{
color:green
}
    由于b晚于a定义,所以b覆盖a,反之则a覆盖b
 
 
2.类选择器优先级大于标签选择器;
    例如:
    div{
color:red
}
.div{
color:green
}
    .div将覆盖div
3.类选择器优先级等于纯属性选择器,谁后定义谁优先级高,例如:
    [data-name='div']{
color: red
}
.a{
color:blue
}
    .a将覆盖[data-name='div'],反之[data-name='div']覆盖.a
4.类选择器优先级小于标签+属性组合选择器,例如:
    div[data-name='div']{
color: red
}
.a{
color:blue
}
    .a将被div[data-name='div']覆盖
5.类选择器优先级小于id选择器,例如:
    .a{
color:blue
}
#div{
color: red
}
    .a将被#div覆盖
6.标签+属性组合选择器优先级小于id选择器,例如:
    [data-name='div']{
color:blue
}
#div{
color: red
}
    #div将会覆盖[data-name='div']
7.标签选择器优先级小于id选择器,例如:
    div{
color:blue
}
#div{
color: red
}
    #div将会覆盖div
8.标签选择器优先级小于纯属性选择器,例如:
    div{
color:blue
}
[data-name='div']{
color: red
}
    div将会被 [data-name='div']覆盖
 
综上所述: 标签选择器<类选择器=纯属性选择器(先定义会被覆盖)<标签+属性组合选择器<id选择器。
 
以上是一个一个试出来的,错误的地方还望指正。

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. 【转】ubuntu 编码 UTF-8 GBK GB18030

    添加编码支持 sudo locale-gen zh_CN.GBK sudo locale-gen zh_CN.GB2312 sudo locale-gen zh_CN.GB18030 2.更新一下lo ...

  2. [OFBiz]简介 二

    1. 执行ant run-install后,生成了55个ofbiz的jar.加上最初的E:\apache-ofbiz-10.04\framework\entity\lib\ofbiz-minerva. ...

  3. Appium自动化测试环境的搭建及脚本执行

    之前搭建了robotium的环境,并使用了一下,因为需要兼顾到ios的测试,所以这次又搭建了appium的环境.关于Appium的介绍网上有很多了,也可以去它的官网学习,这里就不在赘述了. 具体搭建步 ...

  4. 设计模式_Decorator_装饰模式

    形象例子: Mary过完轮到Sarly过生日,还是不要叫她自己挑了,不然这个月伙食费肯定玩完,拿出我去年在华山顶上照的照片,在背面写上“最好的的礼物,就是爱你的Fita”,再到街上礼品店买了个像框(卖 ...

  5. TCP/IP 子网掩码浅析

    定义 是一种用来指明一个IP地址的哪些位标识的是主机所在的子网以及哪些位标识的是主机的位掩码.子网掩码不能单独存在,它必须结合IP地址一起使用.子网掩码只有一个作用,就是将某个IP地址划分成网络地址和 ...

  6. uva 10652

    大意:有n块矩形木板,你的任务是用一个面积尽量小的凸多边形把它们包起来,并计算出木板站整个包装面积的百分比. 思路:按照题意将所有矩形顶点坐标存起来,旋转时先旋转从中心出发的向量,求得各个坐标之后,求 ...

  7. Serach

    1.二分查找 public class BubbleSort { public static int binarySerach(int[] a,int value){ int low=0; int h ...

  8. hdoj 1874 畅通工程续【dijkstra算法or spfa算法】

    畅通工程续 Time Limit: 3000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submi ...

  9. Javascript注意事项一【防止浮点数溢出】

    num = 0.1+0.2; //0.30000000000000004 a = (1+2)/10; //0.3(浮点数中的整数运算时精确的)

  10. Unity3D资源存放笔记

    文件夹及路径 昨天记了一篇AssetBundle学习笔记,那么游戏中的各种资源应该如何存放呢? 在网上一阵搜罗,把笔记记一下. 非特殊名称文件夹 非Unity3D指定名称的文件夹中的资源,如果游戏场景 ...