CSS笔记12：css三大特性_12.css 三大特性分别是什么-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_46037153/article/details/110188612

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style>
		/* 层叠性 */
		/* 1.样式冲突 比如俩个color  遵循的是就近原则，哪个样式离结构近，就选那个，这边选pink颜色 */
		/* 样式不冲突,就不会层叠 */
		div {
			color: red;
			font-size: 100px;
		}

		/* 元素选择器 */

		div {
			color: pink;
		}

		/* 继承性 子标签继承父标签的某些样式，text-,font-,line-这些元素开头的可以继承，以及color属性  */
		.nav {
			/* 现在只给父亲写了样式,儿子也会继承这些样式 */
			color: red;
			font-size: 100px;
		}

		/* (类选择器) */

		/* ///行高的继承 */
		/* 1.行高可以跟单位,也可以不跟单位
			 2.如果子元素没有设置行高，就会继承父亲的行高为1.5
			 3.子元素的行高=子元素的文字大小*1.5
			 */

		.na {
			/* font: 50px/16px  Microsoft YaHei; */
			font: 50px/1.5 Microsoft YaHei;
		}

		.na .p {
			font-size: 55px;
			/* p没有行高,但是会继承父亲的行高1.5 */
		}

		/* 优先级 */
		/* 当同一个元素指定多个选择器,就会有优先级的产生 */
		/* 1.选择器相同,执行层叠性,谁离得近用谁
		2.选择器不同,根据选择器权重执行 */
		/* 权重划分:从上往下依次变高，权重比较从做往右比较1>0,没有进位的问题 */
		/* 
		继承或者*           0，0，0，0
		元素/标签选择器          0，0，0，1
		类选择器,伪类选择器  0，0，1，0
		ID选择器           0，1，0，0
		行内样式style=""   1，0，0，0
		!important重要的   无穷大
		*/

		#1 {
			color: #FF0000;
		}

		/* ID选择器 */

		.test {
			color: #0000FF !important;
			/* !important重要的,优先选择 */
		}

		/* 继承的权重为o，如果该元素没有直接被选中，不管父元素的权重有多高，子元素得到的权重永远为0
			 简单意思就是：p被选出来了，那就执行这个样式
			 以后看标签执行哪个样式，就先看这个标签有没有直接被选出来
			 */
		/* 父亲的权重为100 */
		#father {
			color: #FF0000;
		}

		/* p继承的权重为0 */
		p {
			color: #FFC0CB;
		}

		/* a链接浏览器默认制定一个样式,蓝色的,有下划线a{color:blue} */

		a {
			color: #008000;
		}

		/* 复合选择器会有权重叠加的问题 */
li的权重为0,0,0,0
		li {
			color: red;
		}
/* ul li权重0,0,0,1+0,0,0,1=0,0,0,2 */
	ul li {
			color: #008000;
		}
		/* .nav li 权重为0,0,1,0+0，0，0，1=0，0，1，1 */
		.nav li {
			color: #FFC0CB;
		}
		
		
		
		
		/* 权重叠加小练习
		 div ul li->0,0,0,3三个标签选择器三个0001相加
		 .nav ul li->0,0,1,2类选择器+俩个标签选择器0010+0001+0001
		 a:hover->0,0,1,1 a标签选择器+:hover伪类选择器
		 .nav a->0,0,1,1类选择器+标签选择器
		 
		 */
		
		
		/* 小练习2 */
			
		.navv li {
			color: red;
			}
		/* 需求把第一个小li颜色改成粉色，加粗 */
		
		 .pink {/*失败 ，这边没有考虑到权重问题*/
			color: #FFC0CB;
			font-weight: 700;	
			}
		/* 上面 .navv li 权重为11 .pink权重为10，失败*/
			
		.navv .pink {/* 这样改.navv .pink权重为20 ，成功*/
			color: #FFC0CB;
			font-weight: 700;	
			}
		
		
	</style>



	<body>
		<!-- css三大特性：层叠性，继承性，优先性 -->


		<div>长江后浪推前浪</div>

		<div class="nav">
			<p>龙生龙，逢生非</p>
		</div>

		<div class="na">
			<p>啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦</p>
		</div>

		<div class="test" id="1" style="color: #FF4500;">优先级</div>


		<div id="father">
			<p> 继承的权重为o</p>
		</div>

		<a href="#">我是单独的样式</a>


		<ul>
			<li>大猪蹄子</li>
			<li>猪蹄子</li>
			<li>蹄子</li>
		</ul>
		<ul class="nav">
			<li>大猪蹄子</li>
			<li>猪蹄子</li>
			<li>蹄子</li>
		</ul>
		
		<!-- 小练习 -->
		<ul class="navv">
			<li class="pink">1111111111</li>
			<li>222222222</li>
			<li>333333333</li>
			<li>444444444</li>
			
		</ul>
		
		
	</body>
</html>

权重划分:从上往下依次变高，权重比较从做往右比较1>0,没有进位的问题 /
/
继承或者* 0，0，0，0
元素/标签选择器 0，0，0，1
类选择器,伪类选择器 0，0，1，0
ID选择器 0，1，0，0
行内样式style="" 1，0，0，0
!important重要的无穷大

权重叠加小练习

	 div ul li->0,0,0,3三个标签选择器三个0001相加
	 .nav ul li->0,0,1,2类选择器+俩个标签选择器0010+0001+0001
	 a:hover->0,0,1,1 a标签选择器+:hover伪类选择器
	 .nav a->0,0,1,1类选择器+标签选择器

/* 小练习2 */

	.navv li {
		color: red;
		}
	/* 需求把第一个小li颜色改成粉色，加粗 */
	
	 .pink {/*失败 ，这边没有考虑到权重问题*/
		color: #FFC0CB;
		font-weight: 700;	
		}
 上面 .navv li 权重为11 .pink权重为10，失败*/
		
	.navv .pink {/* 这样改.navv .pink权重为20 ，成功*/
		color: #FFC0CB;
		font-weight: 700;	
		}