CSS样式之优先级
说到到css的样式优先级，今天偶再来回顾下，从css的样式优先级可分为两个部分：
1、从CSS代码放置的位置看权重优先级：
内联样式 > 内部嵌入样式 >外联样式
2、从样式选择器的权重优先级：
Important > 内联样式 > ID > 类、伪类、属性选择器 > 标签、伪元素 > 通配符
今儿，我们重点来看看第2点—样式选择器。
请看以下代码：
<!DOCTYPE html>
<head>
<title>css</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style>
div.class1 {
background:pink;
}
.class2 {
background:green;
}
</style>
</head>
<body>
<div class="class1 class2" style="width:100px;height:100px;"></div>
</body>
</html>
运行代码，效果图如下：
是粉红色。按照上面的说法class1、class2不都属于类嘛。既然优先级一样，那不就应该是后面的class2（绿色）覆盖住class1（粉红色）吗？
是的。类是属于同一级，但是div.class1和.class2的优先权重是不一样的。
请看下表：
|
选择器 |
权重 |
|
!important |
1,0,0,0 |
|
ID |
0,1,0,0 |
|
类、伪类、属性选择器 |
0,0,1,0 |
|
标签、伪元素 |
0,0,0,1 |
|
通配符 |
0,0,0,0 |
当我们看到html代码时，不要单一看它调用的是什么样式，比如上面的class1、class2在放在div标签上时，都一样，类嘛
但是，其实它们的权重是不一样的。所以要追踪到css样式中，查看它们的权重。
这个权重的计算方法就是利用上面表中对应的权重值，叠加，得到最终值。值越大，权重就越大，从而优先级也就越高咯。
如上面代码中的class1、class2：
结合上面中列出的权重，从而可得class1和class2的权重
class1 = div(0001)+.class1(0010) = 0011
class2 = .class2(0010) = 0010
class1的权重大于class2的权重，从而class1的优先级就高于class2咯。
所以，<div class=”class1 class2”>显示class1的粉红色咯 。
下面列举了几个css表达式的权重值，自我测试下：
|
css选择器表达式 |
权重值 |
|
h1 + *[rel = up ] |
0011 |
|
li.red.level |
0021 |
|
#test:not(ii) |
0110 |
|
#test:before |
0101 |
好了，那当样式的优先级一样呢？那就得看它们出现的顺序了。后出现的覆盖前面的。
注意：是样式表中的顺序，而不是html标签中class出现的顺序。
如下：
<!DOCTYPE html>
<head>
<title>css</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style>
.class2 {
background:green;
}
.class1 {
background:pink;
}
</style>
</head>
<body>
<div class="class1 class2" style="width:100px;height:100px;"></div>
</body>
</html>
运行上述代码，页面显示结果为粉色，而不是绿色！！
CSS样式之优先级的更多相关文章
- [程序猿入行必备]CSS样式之优先级
专业玩家请移步:http://www.w3.org/TR/CSS2/cascade.html 使用CSS控制页面样式时,常常出现设定的样式被"覆盖",不能生效的情况. 浏览器是根据 ...
- CSS样式的优先级
1.相同权值情况下,CSS样式的优先级总结来说,就是--就近原则(离被设置元素越近优先级别越高): 内联样式表(标签内部)> 嵌入样式表(当前文件中)> 外部样式表(外部文件中). 2.权 ...
- css !important用法以及CSS样式使用优先级判断
之前一直看到很多css中都有!important这个样式,一直不知道有什么作用的,今天在网上详细了解了一下,看了别人的博客,顺便转载收藏一下 css !important用法CSS样式使用优先级判断 ...
- Web前端面试指导(十三)：css样式的优先级是怎么样的？
题目点评 CSS样式的优先级规则给人的感觉总是摸不透,更不用说怎么去表达了,在网络上流传着很多版本,描述的都很复杂也不全面,看了之后还是不满意.我来给大家介绍一个比较系统.全面有比较容易记住的规则吧! ...
- 学习了解CSS3发展方向和CSS样式与优先级
通过学习CSS3游戏介绍.CSS样式和优先级章节,了解到html5+css3+js不光可以实现动画,其次可以往这个游戏与建模方向发展,更多css3特效访问Gerard Ferrandez on Cod ...
- CSS样式选择器优先级
CSS样式选择器分为4个等级,a.b.c.d,可以以这四种等级为依据确定CSS选择器的优先级. 1.如果样式是行内样式(通过Style=””定义),那么a=12.b为ID选择器的总数3.c为Class ...
- CSS 样式的优先级
1. 同一元素引用了多个样式时,排在后面的样式属性的优先级高 例如,下面的 div,同时引用了 [.default] 和 [.user] 中的样式,其中 [.user] 样式中的 width 属性会替 ...
- CSS样式表优先级
使用CSS样式表一共有2种方式:内部和外部,其中内部分为行内样式和嵌入式,外部分为导入式和链接式. 如果需要在不同的方式中设定同一个属性的时候,样式的优先级别就出现了. 测试代码如下: red.css ...
- css样式引入优先级？
css中的优先级讲的有 1.选择器的优先级. 2.样式引入的优先级. 今天要研究的是样式引入的优先级.网上又很多答案都是如下的,但是真的是这样的吗,让我们来探一探究竟是如何. 四种样式的优先级别是:行 ...
随机推荐
- C++：一般情况下，设计函数的形参只需要两种形式
C++:一般情况下,设计函数的形参只需要两种形式.一,是引用形参,例如 void function (int &p_para):二,是常量引用形参,例如 void function(const ...
- 关于H5框架之Bootstrap的小知识
浏览器支持 旧的浏览器可能无法很好的支持 Bootstrap 支持 Internet Explorer 8 及更高版本的 IE 浏览器 CSS源码研究 我们不是在head里面引入了下面这些文件么 &l ...
- 简单谈谈如何利用h5实现音频的播放
作者:白狼 出处:http://www.manks.top/article/h5_audio本文版权归作者,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律 ...
- 转载：Hadoop排序工具用法小结
本文转载自Silhouette的文章,原文地址:http://www.dreamingfish123.info/?p=1102 Hadoop排序工具用法小结 发表于 2014 年 8 月 25 日 由 ...
- ThreadPoolExecutor源码学习（1）-- 主要思路
ThreadPoolExecutor是JDK自带的并发包对于线程池的实现,从JDK1.5开始,直至我所阅读的1.6与1.7的并发包代码,从代码注释上看,均出自Doug Lea之手,从代码上看JDK1. ...
- replace实现正则过滤替换非法字符
html+js结构如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http: ...
- java-如何用eclipse打包jar
Eclipse通过导出的方式(右键单击项目,之后选择Export)打包java类文件生成jar包. 方法一:(在项目工程没有引用外部jar包时,直接导出) 选中工程---->右键,Export. ...
- LA
grmon -altjtag -u 公式rand()%(b-a),是求范围随机数的计算公式,%是做求余运算,正整数对n求余的范围肯定是在0~n-1之间,也就是rand()%(b-a)的范围是0~b-a ...
- c#开源消息队列中间件EQueue 教程
一.简介 EQueue是一个参照RocketMQ实现的开源消息队列中间件,兼容Mono,具体可以参看作者的文章<分享一个c#写的开源分布式消息队列equeue>.项目开源地址:https: ...
- MySQL实现嵌套集合模型
MySQL实现嵌套集合模型 译文主要是介绍如何用MySQL来存储嵌套集合数据.在其中会增加一些自己的理解,也会删除掉一些自认为无用的废话. 这篇文章主要讲的是嵌套集合模型,所以邻接表不是本文的重点,简 ...