1. 层叠性
相同选择器给设置了相同的样式,此时一个样式就会覆盖另一个冲突样式。
原则:
有冲突时,哪个样式离结构近,就执行哪个样式:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
div {
color: black;
}
div {
color: red;
}
</style>
<body>
<div>
你好
</div>
</body>
</html>
2. 继承性
2.1.普通继承
子标签会继承父标签的某些样式(text-,font-,line-这些样式可以继承,还有color),如文本字体和色号。
<style>
div {
color: red;
}
</style>
<body>
<div>
<p>你好</p>
</div>
</body>
这里将div的字体设置为红色,最后p中字体也会是红色。
2.2 特殊:行高的继承
在实际开发中,设置行高时常会这么写(斜杠后面跟的不再是一个px的数):
font:12px/1.5 "微软雅黑"
这个1.5就是当前元素文字大小的1.5倍
下面这段代码对应的行高为30px*1.5=45px
style>
body {
font: 20px/1.5 "微软雅黑";
}
div{
font-size: 30px;
}
</style>
<body>
<div>
你好
</div>
</body>
这种方式的优势:子元素可以根据自己的文字大小自动调整行高。
3. 优先级
同一个元素指定多个选择器,就会有优先级产生:
- 选择器相同,执行层叠性。
- 选择器不同根据选择器权重。
权重表:
比如:
<style>
body {
font-size: 12px;
}
div{
font-size: 20px;
}
.one {
font-size: 40px;
}
</style>
<body>
<div class="one">你好</div>
</body>
显然最后字体大小为40px。
4. 权重叠加问题
看这一段代码,标签是一样的那么难道不应该用层叠性嘛,哪个近就用哪个,不应该是黑色么,为什么最后是红的呢?——这就涉及到了复合选择器的权重叠加问题。
这里ul li是两个元素选择器,故0,0,0,1+0,0,0,1=0,0,0,2,这就是这个复合选择器的权重。
<style>
ul li {
color: red;
}
li {
color: black;
}
</style>
<body>
<ul>
<li>你好</li>
</ul>
</body>
其他例子: