CSS三大特性

最新推荐文章于 2024-07-12 14:38:32 发布

良风抚旧

最新推荐文章于 2024-07-12 14:38:32 发布

阅读量209

点赞数 1

分类专栏：前端文章标签： css css3 前端

本文链接：https://blog.csdn.net/Arcofcosmos/article/details/122607054

版权

前端专栏收录该内容

16 篇文章 0 订阅

订阅专栏

CSS三大特性

层叠性

相同的选择器设置相同的样式属性，其中一个样式会覆盖另外一个。

//同一div选择器，pink属性值离<body>最近，则red值被覆盖，font-size样式未冲突，则执行有效
<style>
	div {
		color: red;
		font-size: 17px;
	}
	div {
		color: pink;
	}
</style>

<body>
	<div></div>
</body>

层叠性原则

样式冲突，执行就近原则，哪个样式离<body>结构近，就选择哪一个。
同一样式会冲突覆盖，样式不冲突不会覆盖。

继承性

子标签会继承父标签的某些样式，如文本颜色字号行高等。

<style>
	div {
		color: red;
	}
</style>

<body>
	<div>
		<p>文本</p>
	</div>
</body>

对父标签div设置样式会影响到子标签p。

优先级性

当对同一结构设置的选择器不同时，则优先级也不同。

设置样式的优先级从小到大为：

继承或者通配符–>标签选择器–>类选择器或者伪类选择器–>id选择器–>行内样式属性style = “”–>在属性值后添加！important标志

权重大小由前到后分别为：

0000–>0001–>0010–>0100–>1000–>无穷大

<style>
	div {
		color: green;
	}
	* {
		color: pink;
	}
	p{
		color: purple!important;					//!important标志，优先级最高
	}
	.test {
		color: red;
	}
	#demo {
		color: blue;
	}
</style>

<body>
	<div>
		//添加行内样式属性style
		<p class = "test" id = "demo" sytle = "color: rgb(0,0,0)">文本</p>
	</div>
</body>

优先级与选择器的前后顺序无关。只要是继承，不论父标签样式优先级最高，子标签的优先级永远最低。

链接a标签默认有标签选择器的默认样式，更改样式需要使用标签选择器及以上优先级的选择器样式更改。

复合选择器优先级

复合选择器会产生权重直接叠加。权重更大的复合选择器的优先级更高。

<style>
	p {
		color: green;		//权重为0001
	}
	
	div p {
		color: red;			//权重为0001+0001 = 0002>0001,两者都属于标签选择，不存在继承
	}
	
	.div1 p {
		color: blue;		//权重为0010+0001 = 0011>0002
	}
	
	.div1 .pp {
		color: purple;		//权重为0010+0010 = 0020>0011
	}
</style>

<body>
	<div class = "div1">
		<p class = "pp">文本</p>
	</div>
</body>

复合选择器权重直接相加，并且无进位。

良风抚旧

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS三大特性

CSS三大特性层叠性相同的选择器设置相同的样式属性，其中一个样式会覆盖另外一个。//同一div选择器，pink属性值离<body>最近，则red值被覆盖，font-size样式未冲突，则执行有效<style> div { color: red; font-size: 17px; } div { color: pink; }</style><body> <div></div></body>
复制链接

扫一扫