CSS的三大特性
CSS有三个特性,分别是是层叠性、继承性以及优先级
继承性
特性:子元素会继承父元素样式的特点
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
color: blue;
}
</style>
</head>
<body>
<div>
<p>这是一个段落</p>
</div>
</body>
</html>
效果:
虽然是给div设置样式,但是p标签在div里,因为CSS的继承性,所以p标签就继承了div的样式 字就变成蓝色了
CSS的继承性虽好,但也不是所有的都能继承
控制文字的属性都能继承,不能控制文字属性的都不能继承
继承失效的两种情况:
- a标签的color会继承失效
- h系列的font-size会继承失效
层叠性
CSS本身就叫做层叠样式表.层叠性也很好理解,就是给标签设置不同的样式,最后会层叠到一起,共同作用在标签上
当样式冲突时,只有当选择器优先级相同时,才会通过层叠性判断效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p {
color: red;
color: blue;
}
</style>
</head>
<body>
<div>
<p>这是一个段落</p>
</div>
</body>
</html>
效果:
虽然我给p标签设置了两次颜色,但是后面的颜色将前面的颜色给覆盖掉了,这就是CSS的层叠行
优先级
不同的选择器具有不同的优先级,优先级高的选择器样式会覆盖掉优先级低的选择器样式
扫描二维码关注公众号，回复： 14774348 查看本文章
优先级的大小关系:
继承<通配符选择器<标签选择器<类选择器<id选择器<行内选择器<!important
- !important要写在属性值后面 分号之前
如果是复合选择器,则需要通过权重计算的方式来决定那个选择器会生效
在复合选择器中,会分别取比较 行内式 id选择器 类选择器和标签选择器的个数.
比较的规则:
- 从左往右比,如果比较出来大小,后面不用再比了.如果相同,就继续比较后面的.
- 如果全部相同,就看谁写在下面,哪个写在下面听哪个的
注意:!important如果不是继承,那么权重最高
感谢你的观看!希望这篇文章能帮到你!
web前端开发专栏在不断更新中,欢迎订阅!
“愿与君共勉,携手共进!”
