CSS三大特性
层叠性、继承性、优先级
1.层叠性
相同选择器设置相同样式,此时一个样式就会覆盖(层叠)另一个冲突的样式。
原则:
- 样式冲突,遵循就近原则,哪个样式离结构近,就执行哪个样式
- 样式不冲突,不会层叠
div {
color: red;
font-size: 20px;
}
div {
color: pink;
}
/* 执行color: pink;和font-size: 20px; */
<div>长江后浪推前浪</div>
2.继承性
子标签会继承父标签的某些样式。
div {
color: pink;
font-size: 20px;
}
<div>
<p>龙生龙,凤生凤</p>
</div>
-
只有部分样式可被继承(文本相关:text-,font-,line-开头元素,以及color属性)
-
恰当使用可简化代码,降低CSS样式复杂度
行高的继承
body {
color: yellow;
font: 12px/1.5 'Microsoft YaHei';
}
div {
/* 子元素继承了父元素body的行高“1.5倍” */
/* 因此div行高为 14*1.5=21px */
font-size: 14px;
}
p {
/* p行高为 20*1.5=30px */
font-size: 20px;
}
/* li没有指定文字大小 但继承body 因此行高 12*1.5=18px */
<body>
<div>赫奇帕奇</div>
<p>赫奇帕奇</p>
<ul>
<li>赫奇帕奇</li>
</ul>
</body>
- 行高可以跟单位也可以不跟
- 如果子元素没有设置行高,则继承父元素
- 子元素的行高:当前子元素文字大小*行高倍数
- 不跟单位的优势:子元素可以根据自己文字大小自动调整行高
3.优先级
当同一个元素指定多个选择器,优先级会产生
- 选择器相同,执行层叠性
- 选择器不同,根据选择器权重执行
#demo {
color: blue;
}
.test {
color: pink !important;
}
div {
color: red;
}
<div class="test" id="demo" style="color: purple;">你笑起来真好看</div>
选择器 | 选择器权重 |
---|---|
继承 | NULL |
* | 0,0,0,0 |
元素选择器 | 0,0,0,1 |
类选择器,伪类选择器,类属性值 | 0,0,1,0 |
id选择器 | 0,1,0,0 |
行内样式style="" | 1,0,0,0 |
!important(一般在引用第三方库后更改其样式时使用) | 无穷大 |
通配符与继承的博弈:
通配符*>继承
<body>
<article>
<h2>yooo<span>alison</span></h2>
</article>
</body>
* {
color: red;
}
h2 {
color: green;
}
优先级注意点:
- 权重是4组数字组成,等级从左向右判断,永远不会进位
- 可以简单记为无,0,1,10,100,1000,无穷
- 继承无权重,如果标签被选出来了,不管父元素权重多高,都执行选中标签的样式
#father {
color: red;
}
p {
color: pink;
}
body {
color: purple;
}
/* a链接比较特殊,浏览器默认给他指定了一个样式:蓝色下划线 a {color: blue;} */
<body>
<div id="father">
<p>你还是很好看</p>
</div>
<a href="#">链接</a>
</body>
权重叠加:如果是符合选择器,则会有权重叠加,需要计算权重
例:
- div ul li —>0,0,0,3
- .nav ul li —>0,0,1,2
- a:hover —>0,0,1,1
- .nav a —>0,0,1,1
- .nav[class] —>0,0,2,0
/* 复合选择器权重叠加问题 */
/* 权重虽然会累加,但永远不会进位 */
/* li的权重是0,0,0,1 */
li {
color: red;
}
/* ul li的权重是0,0,0,1 + 0,0,0,1 = 0,0,0,2 */
ul li {
color: pink;
}
/* .nav li的权重是0,0,1,0 + 0,0,0,1 = 0,0,1,1 */
.nav li {
color: purple;
}
<ul class="nav">
<li>赫奇帕奇</li>
<li>拉文克劳</li>
<li>格兰芬多</li>
</ul>
4.预处理器
生产环境中都会使用预处理器生成css文件(less sess)