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选择符分类 首先来看 ...
随机推荐
- Rob Pike:我得到的最佳编程建议
Rob Pike:我得到的最佳编程建议 Rob Pike,目前谷歌公司最著名的软件工程师之一,曾是贝尔实验室Unix开发团队成员,Plan9操作系统开发的主要领导人,Inferno操作系统开发的主要领 ...
- dhcp 提示could not load neutron.agent
错误日志如下: N版存在问题,其它版本不知道 解决方法(代码问题): /usr/lib/python2.7/site-packages/neutron/common/utils.py 在这个方法上(d ...
- 从DOS时代至移动互联网的技术路线回顾
从DOS时代至移动互联网的技术路线回顾 Normal 0 7.8 磅 0 2 false false false EN-US ZH-CN X-NONE /* Style Definitions */ ...
- 【dijkstra优化/次短路径】POJ3255-Roadblocks
[题目大意] 给出一张无向图,求出从源点到终点的次短边. [思路] 先来谈谈Dijkstra的优化.对于每次寻找到当前为访问过的点中距离最短的那一个,运用优先队列进行优化,避免全部扫描,每更新一个点的 ...
- 网络抓包及Http Https通信协议分析
Wireshark基本介绍和学习TCP三次握手 之前写过一篇博客:用 Fiddler 来调试HTTP,HTTPS. 这篇文章介绍另一个好用的抓包工具wireshark, 用来获取网络数据封包,包括ht ...
- web文件上传组件比较jQuery File Upload和Fine Uploader
jQuery File Upload: https://blueimp.github.io/jQuery-File-Upload/ Fine Uploader: http://fineuploader ...
- windows下tomcat的安装配置
一.下载相应的JDK以及tomcat的版本 JDK:jdk-8u131-windows-x64 tomcat:apache-tomcat-8.5.23-windows-x64.zip 二.JDK的安装 ...
- Hyper-V创建固定大小虚拟机
1.新建硬盘 点击确定,就创建好了一个固定大小的vhd文件,下面我们开始创建虚拟机. 2.创建虚拟机 输入虚拟机名称 选择第一代虚拟机 我这里给虚拟机分配512MB内存 网络配置 在这之前我们已经创建 ...
- both, either, neither的用法
http://www.yywords.com/Article/200806/347.html 1. 这三个词都用来谈论两者:both 意为“(两者)都”,either意为“(两者中)任意一个”,ne ...
- MVC之Ajax如影随行
一.Ajax的前世今生 我一直觉得google是一家牛逼的公司,为什么这样说呢?<舌尖上的中国>大家都看了,那些美食估计你是百看不厌,但是里边我觉得其实也有这样的一个哲学:关于食材,对于种 ...