CSS 的优先级机制总结
一、样式优先级：
多重样式（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 的优先级机制总结的更多相关文章
- CSS 的优先级机制[总结]
样式的优先级 多重样式(Multiple Styles):如果外部样式.内部样式和内联样式同时应用于同一个元素,就是使多重样式的情况. 一般情况下,优先级如下: (外部样式)External styl ...
- Css的优先级机制
样式的优先级 多重样式(Multiple Style):如果外部样式.内部样式.内联样式同时应用于同一个元素,就是使用多重样式的情况. 一般情况优先级如下: (外部样式)External style ...
- CSS 样式优先级
首先,选择器优先级顺序 优先级逐级增加的选择器列表: 通用选择器(*) 元素(类型)选择器 类选择器 属性选择器 伪类 ID 选择器 内联样式 !important 规则例外,该样式声明会覆盖CSS中 ...
- css中的继承、层叠、样式优先级机制
一.继承与层叠:
- css优先级机制说明
原文:css优先级机制说明 首先说明下样式的优先级,样式有三种: 1. 外部样式(External style sheet) 示例: <!-- 外部样式 bootstrap.min.css -- ...
- CSS 之 样式优先级机制
多重样式(Multiple Styles):如果外部样式.内部样式和内联样式同时应用于同一个元素,就是使多重样式的情况. 1.一般情况下,优先级从低到高,如下: 浏览器缺省(即浏览器默认) →(外部样 ...
- css优先级机制
所谓CSS优先级,即是指CSS样式在浏览器中被解析的先后顺序. 1.important >(内联样式)Inline style >(内部样式)Internal style sheet ...
- css的优先级 和 权重
之前写页面样式时,有时会遇到 用多条样式定义规则对同一个元素进行样式设置的时候,当时想到的就是 按css选择器的优先级来搞定这个问题,说实话当时也就只记得 内嵌样式 > id > cla ...
- CSS选择器优先级总结
CSS三大特性-- 继承. 优先级和层叠. 继承:即子类元素继承父类的样式; 优先级:是指不同类别样式的权重比较; 层叠:是说当数量相同时,通过层叠(后者覆盖前者)的样式. css选择符分类 首先来看 ...
随机推荐
- 洛谷——P2083 找人
P2083 找人 题目背景 无 题目描述 小明要到他的同学家玩,可他只知道他住在某一单元,却不知住在哪个房间.那个单元有N层(1,2……N),每层有M(1,2……M)个房间. 小明会从第一层的某个房间 ...
- JAVAEE——淘淘商城第一天：电商行业的背景和技术特点，商城的介绍、技术的选型、系统架构和工程搭建
1. 学习计划 1.电商行业的背景. 2.电商行业的技术特点 3.商城的介绍 a) 常用的名词介绍 b) 系统功能介绍 4.淘淘商城的系统架构 a) 传统架构 b) 分布式架构 c) 基于服务的架构 ...
- Swift2.0语言教程之闭包
Swift2.0语言教程之闭包 Swift2.0语言闭包 闭包是自包含的函数代码块,可以在代码中被传递和使用.Swift中的闭包与C和Objective-C中的代码块(blocks)以及其他一些编程语 ...
- 「HNOI2018」转盘
「HNOI2018」转盘 现场推出了大部分结论但是只写了 \(40\) 分暴力,被贺指导踩爆,现在还有点怀念 HNOI2018 贺指导对着镜子荒野行动的日子,那几天他云球迷瞎**指点篮球,被送上指导称 ...
- LOJ P3953 逛公园 NOIP dp 最短路 拓扑排序
https://www.luogu.org/problemnew/show/P3953 开o2过了不开o2re一个点...写法如题 顺便一提这道题在我校oj是a不了的因为我校土豆服务器速度奇慢1s时限 ...
- 自顶向下学搜索引擎——北大天网搜索引擎TSE分析及完全注释[1]寻找搜索引擎入口
转自:http://blog.csdn.net/jrckkyy/article/category/402818 由于百度博客http://hi.baidu.com/jrckkyy发表文章字数有限,以后 ...
- BZOJ3522&4543 [POI2014]Hotel加强版 长链剖分
上上周见fc爷用长链剖分秒题 于是偷偷学一学 3522的数据范围很小 可以暴力枚举每个点作为根节点来dp 复杂度$O(n^2)$ 考虑令$f[x][j]$表示以$x$为根的子树内距离$x$为$j$的点 ...
- python开发_tkinter_自己做的猜数字小程序
读到这篇文章[python 3.3下结合tkinter做的猜数字程序]的时候,就复制了代码,在自己机器上面跑了一下 源程序存在一个缺陷: 即当用户答对了以后,用户再点击'猜'按钮,最上面的提示标签还会 ...
- CodeForces 81D.Polycarp's Picture Gallery 乱搞
D. Polycarp's Picture Gallery time limit per test 2 seconds memory limit per test 256 megabytes inpu ...
- C#情怀与未来，怨天尤人还是抓住机会，能否跟上dnc新时代浪潮？
C#情怀与未来,怨天尤人还是抓住机会,能否跟上dnc新时代浪潮? 经常看到有.NET圈子在讨论是否应该转其它语言 C#情怀是一方面,如果觉得C#未来没前途,光靠情怀是撑不住的, 建议对C#未来 ...