一、继承性
1)什么是继承性?
- 给父元素设置一些属性,子元素/后代也可以使用,这个我们称之为继承性。
2 ) 并不是所有属性都可以继承的,那么有哪些属性具有继承性?
- 只有以color/font-/text-/line开头属性才可以继承
3) 继承性特殊性
- a标签的文字颜色和下划线是不能继承的
- h标签的文字大小是不能继承的
4)继承性应用场景
- 一般用于设置网页上的一些共性信息,例如网页的文字颜色,字体大小等内容
5)案例
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>css继承性</title>
<style>
div{
color: red;
font-size: 16px;
text-decoration: underline;
background: deepskyblue;
}
</style>
</head>
<body>
<div>
<p>子元素</p>
<ul>
<li>
<p>后代元素</p>
</li>
</ul>
<a href="#">我是a标签</a>
<h1>我是h1</h1>
</div>
</body>
</html>
图一子元素继承父元素
图二后代元素继承父元素
图三a标签的文字颜色和下划线是不能继承的
图四h标签的文字大小是不能继承的
二、层叠性
1)什么是层叠性?
- CSS处理冲突的一种能力,这个我们称之为层叠性。
2 ) 什么情况出现层叠性?
- 只有在多个选择器中“同一个标签”,又设置了“相同的属性”的时候,就会发生层叠性
3) 发生层叠性会怎么样?
- 当发生层叠性时,哪个选择器设置的属性起作用,是由优先级来确定
三、优先级
1)什么是优先级?
- 多个选择器可能会选择同一个元素,优先级高的先做,优先级低的后做,这个我们称之为优先级。
2 ) 优先级判断方式有哪些?
- 是否是直接选中(间接选中就是指继承,如果是间接选中时,就近原则)
- 直接选中时是相同选择器(则谁写在后面就听谁的)
- 直接选中时不是同选择器(则就会按照选择器的优先级来层叠)
3)CSS选择器优先级
id > 类 > 标签 > 通配符 > 继承 > 浏览器默认
4)案例
1、间接选中
/* style1*/
<style>
ul{
color: red;
}
</style>
/*style2*/
<style>
ul{
color: red;
}
li{
color: blue;
}
</style>
<ul>
<li>
<p id="identity" class="para">我是段落</p>
</li>
</ul>
style1代码效果如图所示文字为红色
style2代码效果如图所示文字为蓝色
2、直接选中时是相同选择器
/* style1*/
<style>
p{
color: red;
}
p{
color: blue;
}
</style>
/*style2*/
<style>
p{
color: blue;
}
p{
color: red;
}
</style>
<ul>
<li>
<p id="identity" class="para">我是段落</p>
</li>
</ul>
style1代码效果如图所示文字为蓝色
style2代码效果如图所示文字为红色
3、直接选中时不是同选择器
/* style1*/
<style>
</style>
/*style2*/
<style>
li{
color: red;
}
</style>
/*style3*/
<style>
*{
color: blue;
}
li{
color: red;
}
</style>
/*style4*/
<style>
p{
color: green;
}
*{
color: blue;
}
li{
color: red;
}
</style>
/*style5*/
<style>
.para{
color: pink;
}
p{
color: green;
}
*{
color: blue;
}
li{
color: red;
}
</style>
/*style6*/
<style>
#identity{
color: purple;
}
.para{
color: pink;
}
p{
color: green;
}
*{
color: blue;
}
li{
color: red;
}
</style>
<ul>
<li>
<p id="identity" class="para">我是段落</p>
</li>
</ul>
style1代码效果如图所示文字为浏览器默认的黑色
style2代码效果如图所示文字为继承li设置的红色
style3代码效果如图所示文字为通配符设置的蓝色
style4代码效果如图所示文字为p标签设置的绿色
style5代码效果如图所示文字为类设置的粉色
style6代码效果如图所示文字为id设置的紫色