【温故知新】CSS学习笔记（三大特性）

CSS三大特性简介

CSS（层叠样式表）三大特性：层叠性、继承性、优先级。

一、CSS层叠性

所谓的层叠性是指多种CSS样式的叠加。是浏览器处理冲突的一个能力，如果一个属性通过两个相同选择器设置到同一个元素上面，那么这时候一个属性就会将另一个属性层叠掉。

比如先给某个标签指定了内部文字颜色会红色，接着又指定了颜色为蓝色，那么此时出现了一个标签指定了相同样式的不同值的情况，这类情况我们就称之为样式冲突。

一般情况下，如果出现了样式冲突，则会按照CSS书写的顺序，以最后的样式为准。

1、样式冲突，遵循的原则就是就近原则，哪个样式离着结构近，就执行哪个样式；
2、样式不冲突，则不会层叠；

【样例代码】

<!DOCTYPE html>
<html lang="en">
<head>
       <meta charset="UTF-8">
       <title>三大特性-层叠性</title>
       <style>
       div {
              color: blue;
              font-size: 25px;
       }
       div {
              color: grey;
       }
       </style>
</head>
<body>
       <div>三大特性-层叠性</div>  
</body>
</html>

二、CSS继承性

所谓的继承性是指书写CSS样式表的时候，子标签会继承父标签的某些样式（不是全部，一般来说是跟文字相关的属性）。如文本颜色和字号，想要设置一个可继承的属性，只需要将它应用于父元素即可。

恰当的使用继承可以简化代码，降低CSS样式的复杂性，子元素可以继承父元素的样式属性有text-，font-，line-，color等这些元素。

【样例代码】

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>三大特性-继承性</title>
	<style>
	.baba {
		color: blue; 
		font-size: 50px;
	}
	</style>
</head>

<body>
	<div class="baba">
		<p>三大特性-继承性</p>
	</div>	
</body>
</html>

三、CSS优先级

定义CSS样式的时候，经常会出现两个或者多个规则应用在同一个元素上面的情况，这时就会出现优先级的问题，这个时候会引出“权重”的概念。

继承样式的权重为0，即在嵌套结构中，不管父元素样式的权重有多大，被子元素继承时，它的权重都是0，也就是说子元素定义的样式会覆盖继承过来的样式；
行内样式优先，应用style属性的元素，其行内样式的权重非常高；
权重相同的时候，CSS遵循的就是上面说的就近原则，也就是说靠近元素的样式具有最大的优先级，或者说排在最后的样式具有最大的优先级；
CSS中还定义了一个！important命令，该命令被赋予了最大的优先级，也就是说不管权重如何以及样式的位置远近，它的优先级最大。

总结一下权重的知识点：

*继承或者的权重**	0,0,0,0
每个元素（标签）的权重	0,0,0,1
每个类/伪类的权重	0,0,1,0
每个ID的权重	0,1,0,0
每个行内样式的权重	1,0,0,0
每个！important的权重	无穷大（∞）

【样例代码】

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>三大特性-优先级</title>
	<style>
	.baba { /* 权重 0,0,1,0 */
		color: blue;  
	}
	div { /* 权重 0,0,0,1 */
		color: red;
	}
	#yeye { /* 权重 0,1,0,0 */
		color: pink;
	}
	div { /* 权重 ∞ */
		color: hotpink!important;
	}
	* { /* 权重 0,0,0,0 */
		color: grey;
	}
	/* 行内权重 1,0,0,0 */
	</style>
</head>

<body>  
	<div class="baba" id="yeye" style="color: yellow">三大特性-优先级</div>	
</body>
</html>

尤其需要注意的是，权重是可以叠加的。

比如下面的例子：

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 p	0,1,0,1

数位之间没有进制，比如说：0,0,0,5+0,0,0,5 = 0,0,0,10（而不是0,0,1,0）；

再者需要特别注意的是：继承的权重是0；

【样例代码】

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>继承权重为0</title>
	<style>
	.baba {
		color: blue!important;
	}
	p {
		color: red;
	}
	</style>
</head>
<body>
	<div class="baba">
		<p>继承的权重为0</p>
	</div>
</body>
</html>

【温故知新】CSS学习笔记（三大特性）

CSS三大特性简介

猜你喜欢