CSS 之层叠样式的优先级
Posted hellowzl
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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>
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 之层叠样式的优先级的主要内容,如果未能解决你的问题,请参考以下文章