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.样式引入的优先级. 今天要研究的是样式引入的优先级.网上又很多答案都是如下的,但是真的是这样的吗,让我们来探一探究竟是如何. 四种样式的优先级别是:行 ...
随机推荐
- java分享第十四天（TestNG Assert详解）
TestNG Assert 详解org.testng.Assert 用来校验接口测试的结果,那么它提供哪些方法呢? 中心为Assert测试类,一级节点为方法例如assertEquals,二级结点为参 ...
- 我的window10
前言 这个一时半会写不完,也比较耗费时间,留着以后,每周更新一些新的技巧. 折腾了3天多时间的成果——>window10 的全新桌面,不比苹果差!不要说 windows 不能用 mac . 既然 ...
- GIT本地免密配置
在C:\Users\计算机名 下面找到.gitconfig文件(如果没有请新建) 内容为: [user] name = git用户名[user] email = 邮箱 [cred ...
- apk 反编译
http://blog.csdn.net/vipzjyno1/article/details/21039349/ [置顶] Android APK反编译就这么简单 详解(附图) 标签: android ...
- nginx-nginx.conf脚本
user www www; worker_processes ; error_log /usr/local/nginx/logs/error.log info ; pid /var/run/nginx ...
- USACO翻译：USACO 2012 JAN三题（3）
USACO 2012JAN(题目三) 一.题目概览 中文题目名称 放牧 登山 奶牛排队 英文题目名称 grazing climb lineup 可执行文件名 grazing climb lineup ...
- 不需要sql进行计算数据的平均值、最大值、最小值、和
介绍下SqlServer.前端js.后台C#三个阶段对均值.最大值.最小值.和计算int[] jisuan = {0, 1, 3, 5, 7,8 }; List<int> jisuan2 ...
- WebServer+ADO+百万数据查询
很简单的demo,查询速度快,易理解,废话不说 上demo 看完就明白了 源码地址:http://files.cnblogs.com/files/SpadeA/WebDemo.zip 这是关于Web ...
- MVC学习二：基础语法
目录 一:重载方法的调用 二:数据的传递 三:生成控件 四:显示加载视图 五:强类型视图 六:@Response.Write() 和 @Html.Raw()区别 七:视图中字符串的输入 八:模板页 一 ...
- Lesson 11 One good turn deserves another
Text I was having dinner at a restaurant when Tony Steele came in. Tony worked in a layer's office y ...