样式优先级
多重样式优先级
内联样式 > 内嵌样式表 > 外部样式表 > 浏览器样式表
css 7 种选择器
- id 选择器
- 类选择器
- 伪类选择器
- 属性选择器
- 伪元素选择器
- 通配选择器
- 标签选择器
- CSS 优先规则：
- 内联样式 > id 选择器 > 类选择器 = 伪类选择器 = 属性选择器 > 标签选择器 = 伪元素选择器
- !important 规则例外
一些经验法则：
Always 要优化考虑使用样式规则的优先级来解决问题而不是 !important
Only 只在需要覆盖全站或外部 css（例如引用的 ExtJs 或者 YUI ）的特定页面中使用 !important
Never 永远不要在全站范围的 css 上使用 !important
Never 永远不要在你的插件中使用 !important
CSS继承性说明：
-
有一些属性给父类或祖先元素设置后，其后代元素也会继承该样式，这就叫做继承性。
-
继承性是从当前元素开始，一直到最小的元素。
-
后代元素能够继承来自祖先元素的文字样式。这些属性包括：**color，text-开头，line-开头的，font-**开头的。
-
关于盒子、定位、布局的属性，不能被继承。
<style>
div{
color: blueviolet;
font-size: 24px;
border: 1px solid red;
}
span{
color:cyan;
}
/* p{
border: 1px solid red;
} */
</style>
<div>
妖怪我要你助我修行
<p>大威天龙
<span>青蛇</span>
</p>
</div>
CSS层叠性说明：
- 样式表：行内式>内嵌式与外链式 （就近原则）
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./css/index.css">
<style>
p {
color: blueviolet;
}
</style>
</head>
<body>
<p style="color: blue;">我是蓝色</p>
</body>
- 选择器：ID选择器>类选择器>标签选择器
<style>
p {
color: blueviolet;
}
#red {
color: red;
}
.black {
color: black;
}
</style>
<p id="red" class="black">我是蓝色</p>
-
复杂选择器权重的计算比较数基础选择器的数量：ID选择器的数量 类选择器的数量 标签选择器的数量，ID选择器的权重记为100，类选择器记为10，标签选择器记为1。PS：不进位，255个标签等于一个类名。没有任何实战的意义。
#box1 .box2 p { color: seagreen; } div div #box3 p { color: steelblue; } <div class="box1" id="box1"> <div class="box2" id="box2"> <div class="box3" id="box3"> <p class="p1 p2">猜猜我是什么颜色？</p> <p class="p2 p1">猜猜我是什么颜色？</p> </div> </div> </div> -
权重相同时，比较书写顺序，在后面的会覆盖前面的。
-
并集选择器计算权重时，要分开计算。
-
如果不能直接选中元素，通过继承性影响的话，权重为0。
-
同一个标签，携带了多个类名，且样式有冲突时，跟类名的顺序无关，和样式的先后顺序有关。
-
总结：对于相同的选择器：样式表的排序：行内>内嵌与外链（就近原则）， 对于非行内样式表，选择器排序：id>类>标签。
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
