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# 完整List例子
C# List Following examples show how to create and manipulate with .NET strongly typed list List<T ...
- Mac 终端 Linux 命令总结(简单命令)
目录操作 命令名 功能描述 使用举例 mkdir 创建一个目录 mkdir dirname rmdir 删除一个目录 rmdir dirname mvdir 移动或重命名一个目录 mvdir dir1 ...
- MemCache 启动
这个MemCache在园子里面的文章也很多,这里只是我自己记录作下笔记 MemCache的官方网站为http://memcached.org/ 启动与关闭memCache # /usr/local/m ...
- uploadify批量上传
js: $("#uploadify").uploadify({ 'uploader':'uploadServlet', 'swf':'image/uploadify.swf', ' ...
- html 设置宽度100% 块状元素往下调解决方法
css在设置body的宽度为100%充满整个屏幕时,当浏览器缩小时块状元素会被挤压下去 解决方案非常简单,给body设置一个最小宽度 min-width:960px; 此时即使浏览器缩小,在960像素 ...
- *HDU1907 博弈
John Time Limit: 5000/1000 MS (Java/Others) Memory Limit: 65535/32768 K (Java/Others)Total Submis ...
- 四、jquery中的事件与应用
当用户浏览页面时,浏览器会对页面代码进行解释或编译--这个过程实质上是通过时间来驱动的,即页面在加载时,执行一个Load事件,在这个事件中实现浏览器编译页面代码的过程.时间无论在页面元素本身还是在元素 ...
- 第三方框架之ThinkAndroid 学习总结（二）
上文记录了一些ThinkAndroid常用的模块,本文继续介绍ThinkAndroid中的网络化模块. 按照惯例先上Github原文地址:https://github.com/white-cat/Th ...
- SQL Server 数据库备份还原和数据恢复
认识数据库备份和事务日志备份 数据库备份与日志备份是数据库维护的日常工作,备份的目的是在于当数据库出现故障或者遭到破坏时可以根据备份的数据库及事务日志文件还原到最近的时间点将损失降到最低点. 数据 ...
- 在.NET中使用管道将输出流转换为输入流
最近在写一段代码,将本地文件压缩加密后发送到服务器,发送到服务器的类用一个输入流作为参数获取要上传的数据,而压缩类和加密类都是输出流. 如何将输出流转换为输入流,最直观的方法是缓存输出流的全部内容到内 ...