一、样式优先级：

　　多重样式（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. Music in Car CF 746F

    题目:http://codeforces.com/problemset/problem/746/F 先感叹一下题目之长! 一些测试样例在后面给出. 题目大意: Sasha 去工作的路上喜欢听歌,途中经 ...

  2. python-arcade时钟

    最近开始学习arcade的图形库,感觉功能很丰富,尝试画了个时钟,显示如下: 贴上调整好的代码: import arcade import math,time SCREEN_WIDTH = 800 S ...

  3. 深入理解ajax系列第四篇

    前面的话 现代Web应用中频繁使用的一项功能就是表单数据的序列化,XMLHttpRequest 2级为此定义了FormData类型.FormData为序列化表单以及创建与表单格式相同的数据提供了便利. ...

  4. DHTML参考手册

    中文DHTML参考手册 本dhtml教程由宏博内容管理系统为它的Smarty模板制作者收集的,目的是可以做出更加精美的模板.下面列出了由动态 HTML 定义的对象.DHTML中文参考手册,实用dhtm ...

  5. Winform 串口通讯之读卡器

    老板给我的第一个硬件就是一个读卡器, 说让我做一下试试,于是从网上查了查就写了出来,相当的简单. 但是后来还有一个地磅的串口通讯,我整整搞了一天. 在窗体类的构造函数中写入 Form.CheckFor ...

  6. An ac a day,keep wa away

    zoj 初学者题: 1001 1037 1048 1049 1051 1067 1115 1151 1201 1205 1216 1240 1241 1242 1251 1292 1331 1334 ...

  7. HTML5学习笔记4

    10.表单元素表单元素用于获取用户的输入数据form 表示HTML表单属性:    action 表示表单提交的页面    method 表示表单提交的请求方式:有POST和GET两种,默认GET(P ...

  8. HeapAlloc 和 GlobalAlloc 以及 VirtualAlloc 三者之间的关系(转)

    VirtualAlloc 一次分配 1PAGE 以上的 RAM. 每次分配都是 PAGE 的整数倍. 你不会想为了分配 1 个 BYTE 的空间而浪费剩下的 4095 字节. OK, 你可以自己写算法 ...

  9. 使用LibZ合并.Net程序集，支持WPF

    最近写了一个小的WPF程序,发布的时候发现依赖着两三个20~30k的小dll的,感觉有点不爽,就想把它合并一下.以前在WinForm下用过微软的ILMerge合并程序集,不过记得它对WPF程序支持不大 ...

  10. 支付宝支付-常用支付API详解(查询、退款、提现等)-转

    所有的接口支持沙盒环境的测试 1.前言 前面几篇文件详细介绍了 支付宝提现.扫码支付.条码支付.Wap支付.App支付 支付宝支付-提现到个人支付宝 支付宝支付-扫码支付 支付宝支付-刷卡支付(条码支 ...