一、样式优先级：

　　多重样式（Multiple Styles）：如果外部样式、内部样式和内联样式同时应用于同一个元素，就是使用多重样式的情况。

　　一般情况下，大家都认为优先级是：内联样式 > 内部样式 > 外联样式，实际上不是如此，内部样式和外联样式优先级一样（看谁在先后的问题）：如果外部样式放在内部样式的后面，则外部样式将覆盖内部样式。如果内部样式放在外部样式的后面，则内部样式将覆盖外部样式。

二、选择器优先级

　　最高：内联样式 > id > class > 标签选择器

　　1.  内联样式表的权值最高 1000；

　　2.  ID 选择器的权值为 100

　　3.  Class 类选择器的权值为 10

　　4.  HTML 标签选择器的权值为 1

　　5. 后代选择器则利用选择器的权值进行计算比较，示例如下：

<html>

<head>

<meta charset="utf-8">

    <title>无标题页</title>

    <style type="text/css">

        #redP p {/* 权值 = 100+1=101 */

             color:#F00;  /* 红色 */

        }

        #redP .red em {/* 权值 = 100+10+1=111 */

             color:#00F; /* 蓝色 */

        }

        #redP p span em {/* 权值 = 100+1+1+1=103 */

             color:#FF0;/*黄色*/

        }

    </style>

</head>

<body>

    <div id="redP">

        <p class="red">red/* 红色 */

           <span><em>em red</em></span> /* 蓝色 */

        </p>

        <p>red</p>/* 红色 */

    </div>

</body>

</html>

三、CSS 优先级法则：

　　A  选择器都有一个权值，权值越大越优先；

　　B  当权值相等时，后出现的样式表设置要优于先出现的样式表设置；

　　C  创作者的规则高于浏览者：即网页编写者设置的CSS 样式的优先权高于浏览器所设置的样式；

　　D  继承的CSS 样式不如后来指定的CSS 样式；

　　E  标有“!important”规则的优先级最大：当 !important 规则被应用在一个样式声明中时，该样式声明会覆盖CSS中任何其他的声明,，无论它处在声明列表中的哪个位置.。尽管如此， !important规则还是与优先级毫无关系，使用 !important不是一个好习惯，因为它改变了你样式表本来的级联规则，从而难以调试。

<style type="text/css">

    #redP p{   /*两个color属性在同一组*/

        color:#00f !important; /* 优先级最大 */

        color:#f00;

    }

</style>

　　怎样覆盖掉 !important：很简单，你只需要：

　　（1）再加一条!important 的CSS语句，将其应用到更高优先级的选择器（在原有基础上添加额外的标签、class或id选择器）上；

　　（2）或是保持选择器一样，但添加的位置需要在原有声明的后面（优先级相同的情况下，后边定义的会覆盖前边定义的）。

CSS 的优先级机制总结的更多相关文章

  1. CSS 的优先级机制[总结]

    样式的优先级 多重样式(Multiple Styles):如果外部样式.内部样式和内联样式同时应用于同一个元素,就是使多重样式的情况. 一般情况下,优先级如下: (外部样式)External styl ...

  2. Css的优先级机制

    样式的优先级 多重样式(Multiple Style):如果外部样式.内部样式.内联样式同时应用于同一个元素,就是使用多重样式的情况. 一般情况优先级如下: (外部样式)External style ...

  3. CSS 样式优先级

    首先,选择器优先级顺序 优先级逐级增加的选择器列表: 通用选择器(*) 元素(类型)选择器 类选择器 属性选择器 伪类 ID 选择器 内联样式 !important 规则例外,该样式声明会覆盖CSS中 ...

  4. css中的继承、层叠、样式优先级机制

    一.继承与层叠:

  5. css优先级机制说明

    原文:css优先级机制说明 首先说明下样式的优先级,样式有三种: 1. 外部样式(External style sheet) 示例: <!-- 外部样式 bootstrap.min.css -- ...

  6. CSS 之 样式优先级机制

    多重样式(Multiple Styles):如果外部样式.内部样式和内联样式同时应用于同一个元素,就是使多重样式的情况. 1.一般情况下,优先级从低到高,如下: 浏览器缺省(即浏览器默认) →(外部样 ...

  7. css优先级机制

    所谓CSS优先级,即是指CSS样式在浏览器中被解析的先后顺序.   1.important >(内联样式)Inline style  >(内部样式)Internal style sheet ...

  8. css的优先级 和 权重

    之前写页面样式时,有时会遇到 用多条样式定义规则对同一个元素进行样式设置的时候,当时想到的就是  按css选择器的优先级来搞定这个问题,说实话当时也就只记得 内嵌样式 > id > cla ...

  9. CSS选择器优先级总结

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

随机推荐

  1. CodeForces 140C New Year Snowmen（堆）

    题面 CodeForces 题解 因为要保证两两不同,所以不能单纯的开堆来维护,堆维护一个二元组,个数为第一关键字,编号为第二关键字,对于一个相同的颜色,统计一下这个颜色的个数再用堆来维护就好了. # ...

  2. 今日头条高级后端开发实习生三轮技术面+HR面 面经

    二面结束后已经意识模糊,好多问过的东西都忘了,而且有一些基础知识就不在这写了,大部分公司都问的差不多... 一面(2018/03/27,11:00~11:50) 1:自我介绍 2:简单说说你这个项目吧 ...

  3. 正规表达式 转 NFA C++

    今天来为大家分享一个编译原理中用正规表达式转NFA的小程序 正规表达式就是类似正则一样的式子,例如:(a|b)*abb,最后应该转化为: 大致的处理流程为: 例子中的表达式:(a|b)*abb,|和* ...

  4. mongodb cmd 常用命令

    如题,命令如下: 1.连接远程数据库命令 mongo -u admin -p admin 192.168.0.197:27017/test 2.查看当前版本 db.version(); 3.mongo ...

  5. python列表中中文编码的问题

    在python2列表中,有时候,想打印一个列表,会出现如下显示: 这个是由于: print一个对象,是输出其“为了给人(最终用户)阅读”而设计的输出形式,那么字符串中的转义字符需要转出来,而且 也不要 ...

  6. BZOJ.4316.小C的独立集(仙人掌 DP)

    题目链接 \(Description\) 求一棵仙人掌的最大独立集. \(Solution\) 如果是树,那么 \(f[i][0/1]\) 表示当前点不取/取的最大独立集大小,直接DP即可,即 \(f ...

  7. [Agc001E] BBQ Hard

    [Agc001E] BBQ Hard 题目大意 给定\(n\)对正整数\(a_i,b_i\),求\(\sum_{i=1}^{n-1} \sum_{j=i+1}^n \binom{a_i+b_i+a_j ...

  8. 友好的KVO

    更友好的KVO 前言 观察者模式是大家在开发过程中每个人都要使用的一种设计模式,在iOS的开发流程中,KVO则是这一开发模式的主要实践手段,观察一个属性,当属性值发生变化的就能能够拿到这个属性的新.老 ...

  9. 20162318 2018-2019-2《网络对抗技术》Exp0 Kali安装 Week1

    1.配置虚拟机 参考博客链接 2.安装kali与配置网络 参考博客链接 3.配置共享文件夹 参考博客链接 4.更换软件源 参考博客链接

  10. Android优化之软引用和弱引用

    Java从JDK1.2版本开始,就把对象的引用分为四种级别,从而使程序能更加灵活的控制对象的生命周期.这四种级别由高到低依次为:强引用.软引用.弱引用和虚引用.这里重点介绍一下软引用和弱引用. 如果一 ...