CSS 样式的优先级
1. 同一元素引用了多个样式时，排在后面的样式属性的优先级高
例如，下面的 div，同时引用了 [.default] 和 [.user] 中的样式，其中 [.user] 样式中的 width 属性会替换 [.default] 样式中的 width 属性。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<style type="text/css">
.default{
width: 100px; /* 定义 width 属性 */
height: 100px;
background-color: #B6E0AE;
margin: -50px 0 0 -50px;
position: absolute;
top: 50%;
left: 50%;
}
.user{
width: 150px; /* 这里 width 的值替换了前面 width 的值 */
}
</style>
</head>
<body>
<div class="default user"></div>
</body>
</html>
2. 样式选择器的类型不同时，优先级顺序为：id 选择器 > class 选择器 > 标签选择器
例如，下面的 div 即获取 id 选择器对应的样式，又获取 class 选择器对应的样式，其中
id 选择器 [#mydiv] 的样式属性（width），优先于 class 选择器 [.user] 中的样式属性（width）；
class 选择器 [.user] 中的样式属性（background-color），优先于标签选择器 [div] 中的样式属性 （background-color）。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<style type="text/css">
#mydiv{
width: 100px;
height: 100px;
margin: -50px 0 0 -50px;
position: absolute;
top: 50%;
left: 50%;
}
.user{
width: 500px; /* #mydiv 中已定义 width 属性，这里的 width 无效 */
background-color: #B6E0AE;
}
div{
background-color: #000000; /* .user中已定义 background-color 属性，这里的 background-color 无效 */
}
</style>
</head>
<body>
<div id="mydiv" class="user"></div>
</body>
</html>
&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;img src="https://pic2.zhimg.com/270cbc3ebaf61b53885a2cb02b8498d5_b.png" data-rawwidth="410" data-rawheight="298" class="content_image" width="410"&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;
3. 标签之间存在层级包含关系时，后代元素会继承祖先元素的样式。如果后代元素定义了与祖先元素相同的样式，则祖先元素的相同的样式属性会被覆盖。继承的样式的优先级比较低，至少比标签选择器的优先级低
例如，下面 id = "child" 的子 div，部分样式继承自 id = "parent" 的父 div，而其新定义的样式属性又会覆盖父元素的样式属性。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<style type="text/css">
#parent{
width: 100px;
height: 100px;
background-color: #B6E0AE;
margin: -50px 0 0 -50px;
position: absolute;
top: 50%;
left: 50%;
}
#child{
/* 继承了父元素的 width 等属性 */
height: 60px; /* 这里的 height 覆盖了父元素的 height 属性 */
background-color: #A7CCEF; /* 这里的 background-color 属性覆盖了父元素的 background-color 属性 */
}
</style>
</head>
<body>
<div id="parent">
<div id="child" style="font-size:12px;">子元素</div>
</div>
</body>
</html>
4. 带有 !important 标记的样式属性的优先级最高
例如，下面的 div 的样式属性中，带有 !important 标记的样式属性（width）会替换其他的（width）。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<style type="text/css">
#parent{
width: 100px;
height: 100px;
background-color: #B6E0AE;
margin: -50px 0 0 -50px;
position: absolute;
top: 50%;
left: 50%;
}
#child{
/* 继承了父元素的 width 等属性 */
height: 60px; /* 这里的 height 覆盖了父元素的 height 属性 */
background-color: #A7CCEF; /* 这里的 background-color 属性覆盖了父元素的 background-color 属性 */
}
div{
width: 150px !important; /* 此时的 width 属性优先级最高，不会被其他的 width 属性覆盖 */
}
</style>
</head>
<body>
<div id="parent">
<div id="child" style="font-size:12px;">子元素</div>
</div>
</body>
</html>
5. 样式表的来源不同时，优先级顺序为：内联样式 > 内部样式 > 外部样式 > 浏览器用户自定义样式 > 浏览器默认样式
例如，下面的 div 的样式有多个来源，其中内联样式 font-size 的优先级最高，外部样式中的 width 属性，优先级比内部样式中的 width 属性的优先级要低。
/* main.css 文件 */
#parent {
width: 300px;
}
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<link type="text/css" rel="stylesheet" href="main.css" />
<style type="text/css">
#parent{
width: 100px; /* 这里的 width 属性替换了 main.css 文件中定义的 width 属性 */
height: 100px;
background-color: #B6E0AE;
margin: -50px 0 0 -50px;
position: absolute;
top: 50%;
left: 50%;
}
#child{
height: 60px; /* 覆盖父元素的 height 属性 */
background-color: #A7CCEF;
font-size: 50px;
}
</style>
</head>
<body>
<div id="parent">
<!--内联样式 font-size 优先级比 <style></style> 中的 font-size 优先级高 -->
<!--chrome 浏览器默认的 font-size 至少是 12px，即使这里设置为小于 12px，浏览器还是显示 12px-->
<div id="child" style="font-size:20px;">子元素</div>
</div>
</body>
</html>
附：如何用 jQuery 选择器来选择 class 中有多个值的元素，如 class="a b c" 的元素？
下面 div 的 class 属性中包含多个值，可以按以下方式来查找这样的 div：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
function myClick() {
//按属性选择器的方式来选择
$("[class='ancestor parent child']").css("color", "red"); //直接列出各个类名来选择（顺序可以互换）
$(".ancestor.parent.child").css("color", "red");
//打乱顺序后，也可以找到同样的元素
$(".child.parent.ancestor").css("color", "red"); //注意：选择器中间不能随便加空格（空格后面的元素表示后代元素），如：
$(".ancestor .parent .child").css("color", "red"); //可以找到 div
$(".child .parent .ancestor").css("color", "red"); //找不到任何元素 //依次过滤来选择
$(".ancestor.parent").filter(".child").css("color", "red");
$(".ancestor").filter(".child").css("color", "red"); //也可以用 find() 来查找满足条件的 所有的后代元素
$(".ancestor.parent").find(".child").css("color", "red");
$(".ancestor").find(".child").css("color", "red");
}
</script>
</head>
<body>
<form action="http://www.bing.com/search">
<div>
<div class="ancestor parent child">
<div class="child">test0</div>
<span class="child">test1</span>
</div>
<div class="ancestor">test2</div>
<div class="parent">test3</div>
<div class="child">test4</div>
<input type="button" onclick="myClick();" value="点击" />
</div>
</form>
</body>
</html>
注：《HTML5程序设计》这本书上有更详细的介绍
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的样式优先级,今天偶再来回顾下,从css的样式优先级可分为两个部分: 1.从CSS代码放置的位置看权重优先级: 内联样式 > 内部嵌入样式 >外联样式 2.从样式选择器 ...
- CSS样式选择器优先级
CSS样式选择器分为4个等级,a.b.c.d,可以以这四种等级为依据确定CSS选择器的优先级. 1.如果样式是行内样式(通过Style=””定义),那么a=12.b为ID选择器的总数3.c为Class ...
- CSS样式表优先级
使用CSS样式表一共有2种方式:内部和外部,其中内部分为行内样式和嵌入式,外部分为导入式和链接式. 如果需要在不同的方式中设定同一个属性的时候,样式的优先级别就出现了. 测试代码如下: red.css ...
- css样式引入优先级？
css中的优先级讲的有 1.选择器的优先级. 2.样式引入的优先级. 今天要研究的是样式引入的优先级.网上又很多答案都是如下的,但是真的是这样的吗,让我们来探一探究竟是如何. 四种样式的优先级别是:行 ...
随机推荐
- socket初级使用(客户端)
在国庆这段时间里用零星的一些时间看了一下socket的学习资料,由于笔者偏向学习实用方面的内容,因此此篇文章涉及理论知识较少,主要是以实现思路(怎么做)为主,但在实现之前还是需要了解一些基础的理论知识 ...
- 使用 InstallShield 制作 Delphi 软件安装包
软件版本: InstallShield 12 Delphi 5/7 SQL Server 2005 一.配置软件信息 二.软件安装的需求配置 三.安装架构 四.安装需要的文件 软件的安装路径.可执行文 ...
- 深入理解HTTP协议、HTTP协议原理分析
http://blog.csdn.net/g1036583997/article/details/50457441
- java 导出Excel文件
最近在做一个文件导出功能,发现大部分博客上通过引用各种的util工具包,其实说白了还是利用apache的poi,在项目中直接导入poi包就可以.直面其原理,随个人喜好封装. 1.首先准备一些poi的j ...
- python核心编程第六章练习6-14
随机数.设计一个“石头.剪子.布”游戏,有时又叫“Rochambeau”,你小时候可能玩过,下面是规则.你和你的对手,在同一时间做出特定的手势,必须是下面一种:石头.剪子.布.胜利者从下面的规则产生, ...
- BitMap存储jpg到手机sd卡中
/** * 将BitMap转成Jpeg图片保存到sdcard(便于以后debug调试查看和裁切调试) */ private void saveBitmap(Bitmap bitmap, String ...
- MySQL学习笔记--数据类型
一.数据类型(内容参考<SQL学习指南>)不完整 1.文本类型 文本类型 最大字节数 tinytext 255 text 65535 varchar 65536 mediumtext 16 ...
- Android开发--RadioButton的应用
1.简介 RadioButton为单选按钮,当一个按钮被选中后,点击其他按钮无法使上一个按钮变为未选中状态.RadioGroup是可以容纳多个RadioButton的容器, 通过使用RadioGrou ...
- 循环报数 Java实现
输入1个数字和多个字符,中间均以空格隔开.假设数字取值为m(范围1~9),后面字符个数为n.假设n个字符围成一圈,从第一个字母开始循环报数,当数到m以后,第m个字母就出列,直到这n个字母全部出列.最后 ...
- ios 程序学习
马上着手开发iOS应用程序:五.提交应用与寻找信息 2013-01-11 15:36 佚名 apple.com 我要评论(0) 字号:T | T 本文介绍了您已经学习完如何开发一个优秀的iOS应用之后 ...