CSS样式（样式表的三个特性）_css样式表有哪些特征？-优快云博客

本文链接：https://blog.youkuaiyun.com/AnyBisks/article/details/78697855

本文详细介绍了CSS样式表的三大核心特性：层叠性、继承性和优先级。通过具体实例展示了不同样式之间的覆盖与继承关系，并解释了优先级的计算方式及其特殊情况。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

CSS样式（样式表的特性）

1.样式表的层叠性
2.样式表的继承性
3.优先级

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">

			/*
			 * 	样式表的层叠性:样式的覆盖 (eg:box2的背景颜色黄色把box1的背景颜色红色覆盖 )
			 * 	
			 * 	总结:当多个样式作用于同一个（同一类）标签时，样式发生了冲突，
			 * 		总是执行后边的代码(后边代码层叠前边的代码)。
			 * 		和标签调用选择器的顺序没有关系。 
			 */
			.box1 {
				background-color: red;
				height: 50px;
			}
			
			.box2 {
				background-color: yellow;
				width: 200px;
			}

			/* 
			 *	样式表的继承性 :样式的继承(eg:p标签的文字样式继承于div的class样式box3)
			 *	
			 *	 总结:继承性发生的前提是包含（嵌套关系）
			 *	   1.文字颜色可以继承
			 *	   2.文字大小可以继承
			 *	   3.字体可以继续
			 *	   4.字体粗细可以继承
			 *	   5.文字风格可以继承
			 *	   6.行高可以继承
			 *		文字的所有属性都可以继承。
			 *	特殊情况：
			 *		h系列不能继承文字大小。
			 *		a标签不能继承文字颜色。
			 */
			.box3 {
				font-family: cursive;
				font-size: 12px;
			}

			/*
			 * 优先级(eg:box1、box2、box3 把div的背景样式覆盖)
			 * 
			 * 默认样式<标签选择器<类选择器<id选择器<行内样式<!important
			 * 0       1      10     100   1000    1000以上     (权重)
			 * 	
			 * 优先级特点:
			 *		1.继承的权重为0
			 *		2.权重会叠加
			 *
			 */
			div {
				background-color: white;
			}

			/*链接默认状态*/
			a:link {
				color: red;
			}

			/*链接访问之后的状态*/
			a:visited {
				color: orange;
			}

			/*鼠标放到链接上显示的状态*/
			a:hover {
				color: bisque;
			}

			/*链接激活的状态*/
			a:active {
				color: green;
			}
			
			/*获取焦点*/
			a:focus {
				color: yellow;
			}
		</style>
	</head>

	<body>
		<div class="box1 box2">我是小白</div>
		<div class="box3">
			<p>我是大白</p>
		</div>
		
		<a href="stu01-05.html">我是大神，请点击我</a>
	</body>

</html>