当前位置：首页 > article >正文

CSS学习7

article 2024/9/22 13:01:18

三大特性

前言
一、层叠性
二、继承性
三、优先级

前言

CSS三大特性：层叠性，继承性，优先级。

一、层叠性

层叠性：多个样式的叠加。

如果样式冲突，遵循就近原则，哪个离结构近执行哪个。
如果样式不冲突，不会重叠。

<html>
	<head>
	<style>
	div {
		color: pink;
		font-size: 12px;
	}
	div {
		color: blue;
	}
	</style>
	</head>
	<body>
	</body>
</html>

二、继承性

继承性，子标签继承父标签的样式。子承父业。
可以继承的有：text-，font-，line-开头的元素。

<html>
	<head>
	<style>
	div {
		color: pink;
		font-size: 12px;
	}
	</style>
	</head>
	<body>
		<div>
			<p>123</p>
		</div>
	</body>
</html>

三、优先级

特殊性算法，关于权重，衡量优先级。
specificity用一个四位字符串表示，类似十六进制大小，左大右小。

标签选择器：0，0，0，1；
类选择器，伪类选择器：0，0，1，0；
id选择器：0，1，0，0；
行内选择器：1，0，0，0；
!important 无穷大；

注意：

权重可以叠加，但是没有进制！
继承的权重是0！
权重是优先级的算法，层叠是优先级的表现。

<html>
	<head>
	<style>
	.king { /*类选择器 0，0，1，0*/
		color: blue;
	}
	div { /*标签选择器 0，0，0，1*/
		color: pink;
	}
	/*:first-child { 伪类选择器 0，0，1，0
		color: green;
	}*/ /*如果不注释，由于伪类选择器和类选择器权重相同，遵循就近原则，为green*/
	#lsk { /*id选择器 0，1，0，0*/
		color: red;
	}

	.lili {
		color: red;
	}
	li {
		color: pink;
	}
	</style>
	</head>
	<body>
		<div class="king">123 <!--blue-->
		</div>
		<div style="color: skyblue">123 <!--行内选择器1，0，0，0-->
		</div>
		<ul class="lili">
			<li>继承的权重是0</li> /*pink*/
		</ul>
	</body>
</html>