CSS的三大特性

CSS有三个非常重要的特性:层叠性、继承性、优先级/font>

层叠性

相同选择器给设置同样的样式时,此时就会出现一个样式覆盖另一个冲突的样式,层叠性主要解决样式冲突的问题。
层叠性原则:

  • 样式冲突,遵循的原则是就近原则,哪个样式离结构近,就执行哪个样式。
  • 样式不冲突,不会层叠。

继承性

子标签会继承父标签的某些样式,如文本颜色和字号。简单理解就是子承父业。

  • 恰当的使用可以简化代码,降低CSS样式的复杂性。
  • 子元素可以继承父元素的样式(text-, font-, line-这些元素开头的可以继承,以及color属性)

行高的继承

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
font: 24px/1.5 "Microsoft YaHei";
color: pink;
}

div {
font-size: 30px;
}

p {
font-size: 18px;
}
</style>
</head>

<body>
<div> 我的div</div>
<p>我的P</p>

</body>

</html>

此时div的行高为301.5=45px, p的行高为181.5=27px。

优先级

div {
font-size: 30px!important;
}

权重叠加

如果是复合选择器,则会有权重叠加,需要计算权重。

  • 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