CSS的三大特性
-
层叠性
相同选择器给设置相同的样式，此时一个样式就会覆盖（层叠）另一个冲突的样式。层叠性主要解决样式冲突的问题。样式冲突，遵循的原则是就近原则，哪个样式离结构近，就执行哪个样式
样式不冲突，不会层叠（覆盖）<style> div{ color:red; font-size:24px; } div{ color:pink; } </style> <body> <div> dddddddddddd </div> </body>此时，文字颜色为pink色，因为pink更靠近结构；但是==font-size:24px;==照样起作用，样式不冲突则不会被重叠；
-
继承性
子标签会继承父标签中的某些样式，如文本颜色和字号（text-,font-,line-,以及color属性） -
优先级
- 当同一个元素指定多个选择器，就会有优先级的产生
- 选择器相同，则执行层叠性
- 选择器不同，则根据选择器权重执行
- 权重叠加：如果是复合选择器，则会有权重叠加，需要计算权重
| 选择器 | 权重 |
|---|---|
| 继承或者* | 0,0,0,0 |
| 元素选择器 伪元素选择器 | 0,0,0,1 |
| 类选择器，伪类选择器，属性选择器 | 0,0,1,0 |
| ID选择器 | 0,1,0,0 |
| 行内样式 style=“” | 1,0,0,0 |
| ！important | 无穷大 |
注：
- 权重由四位数字组成，但是不会有进位。可以理解为类选择器永远大于元素选择器，id选择器永远大于类选择器，以此类推。
- 如果是复合选择器（如ul li）,则会有权重叠加，需要计算权重。
- 等级判断从左到右，相同则判断下一位数值
- 继承的权重为0
权重叠加 demo1 :
<style>
/*最终颜色为pink色 因为复合选择器会有权重叠加的问题
ul li的权重是0,0,0,1 + 0,0,0,1 = 0,0,0,2
*/
ul li{
color:green;
}
/* li的权重是0,0,0,1*/
li{
color: red;
}
/* .nav li的权重是0,0,1,0 + 0,0,0,1 = 0,0,1,1 */
.nav li{
color:pink;
}
</style>
<body>
<ul class="nav">
<li>大猪蹄子</li>
<li>大肘子</li>
<li>猪尾巴</li>
</ul>
</body>
权重叠加 demo2 :
<style>
li {
color: red;
}
.nav {
color: green;
}
</style>
<body>
<!-- 最终颜色为red 因为.nav类选择器虽然权重比 p 元素选择器高，
但是被p继承之后，权重为0 -->
<ul class="nav">
<li>大猪蹄子</li>
<li>大肘子</li>
<li>猪尾巴</li>
</ul>
</body>
权重叠加 demo3 :
<style>
/*权重0,0,1,0+0,0,0,1 = 0,0,1,1*/
.nav li{
color: red;
}
/*权重0,0,1,0*/
.pink {
color:pink;
font-weight: bold;
}
</style>
<body>
<!-- 最终颜色为red加粗 -->
<ul class="nav">
<li class="pink">大猪蹄子</li>
<li>大肘子</li>
<li>猪尾巴</li>
</ul>
</body>
demo3 要想把大猪蹄子设置为粉色，怎么解决？
提高权重-->
写样式.nav .pink{ color:pink }
这样写 权重=0,0,1,0 + 0,0,1,0 = 0,0,2,0 搞定。
78
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
