层叠，CSS样式优先级
1.比较重要性
重要性从高到低：
作者样式表：开发者书写的样式
- 作者样式表中的!important属性
- 作者样式表中的普通样式
- 浏览器默认样式表中的样式
2.比较特殊性
看选择器
总体规则：选择器选中的范围越窄，越特殊
具体规则：通过选择器，计算出一个4位数（xxxx）
元素选择器：body p 这样的选择器
- 千位：内联样式1 其它样式0
- 百位：等于将选择器中所有 id选择器 的数量
- 十位：等于选择器中所有 类选择器，属性选择器，伪类选择器的数量
- 个位：等于选择器中所有元素选择器，伪元素选择器的数量
a{
/* 0001 */
color: red;
}
div ul a{
/* 0003 */
color: green;
}
#mydiv #myul a{
/* 0201 */
color: gray;
}
#mydiv #myul .mylink{
/* 0210 */
color: #0000FF;
}
#mydiv #myul a:link{
/* 0211 优先级最高*/
color: chocolate;
}
3.比较源次序
代码书写顺序靠后的胜出。
#mydiv #myul .mylink{
/* 0210 */
color: #0000FF;
}
#mydiv #myul :link{
/* 0210 次序靠后，比上一样式优先级高*/
color: black;
}
应用
书写一些作者样式，覆盖浏览器默认样式
重置样式表 -> 浏览器的默认样式
常见的重置样式表: normalize.css, reset.css, meyer.css
demo代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css_层叠(优先级)</title>
<style>
a{
/* 0001 */
color: red;
}
div ul a{
/* 0003 */
color: green;
}
#mydiv #myul a{
/* 0201 */
color: gray;
}
#mydiv #myul .mylink{
/* 0210 */
color: #0000FF;
}
#mydiv #myul :link{
/* 0210 次序靠后，比上一样式优先级高*/
color: black;
}
#mydiv #myul a:link{
/* 0211 优先级最高*/
color: chocolate;
}
</style>
</head>
<body>
<div id="mydiv">
<ul id="myul">
<li id="myli">
<a href="www.163.com">
css_层叠（优先级）
</a>
</li>
</ul>
</div>
</body>
</html>
网友评论