CSS权重叠加计算案例

最新推荐文章于 2022-07-30 10:44:35 发布

Youser511

最新推荐文章于 2022-07-30 10:44:35 发布

阅读量535

点赞数 1

文章标签：前端

本文链接：https://blog.csdn.net/qq_45025670/article/details/123661740

版权

第一题

<head>
	<meta charset="utf-8">
	<title>第1题：普通题</title>
	<style>
		/* (行内, id, 类, 标签) */
		/* !important 最高 */
		/* 继承: 最低 */

		/* (0, 2, 0, 0) */
		#father #son {
			color:blue; 
		} 
		
		/* (0, 1, 1, 1) */
		#father p.c2 {
			color:black;
		} 
		
		/* (0, 0, 2, 2) */
		div.c1 p.c2 {
			color:red;
		} 

		/* 继承, 最低 */
		#father { 
			color:green !important;
		} 

		/* 继承, 最低 */
		div#father.c1 {
			color: yellow ;
		} 

	</style>
</head>
<body>
	<div id="father" class="c1">
		<p id="son" class="c2">
			这行文本是什么颜色的？ 
		</p>
	</div>
</body>

结果：blue

第二题

<head>
	<meta charset="UTF-8">
	<title>第2题: 标签选择器选择一类</title>
	<style>
		/* (行内, id, 类, 标签) */
		/* !important 最高 */
		/* 继承: 最低 */
	
		/* 2 */
	  div div {
			color: skyblue;
		} 

		/* 1 */
		div {
			color: red;
		}
	</style>
</head>
<body>
	<div>
		<div>
			<div>
				这行文本是什么颜色？
			</div>
		</div>
	</div>
</body>

结果：skyblue

第三题

<head>
	<meta charset="UTF-8">
	<title>第3题: 权重叠加每位不存在进制</title>
	<style>
		/* (行内, id, 类, 标签) */
		div div div div div div div div div div div div {  
			color: red;
		}
		
		.one { 
			color: pink;
		}
	</style>
</head>
<body>
	<div>
		<div>
			<div>
				<div>
					<div>
						<div>
							<div>
								<div>
									<div>
										<div>
											<div>
												<div class="one">这行文字是什么颜色的？</div>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</body>

结果：pink

第四题

<head>
	<meta charset="UTF-8">
	<title>第4题：权重相同此时比较层叠性</title>
	<style>
		/* (0, 0, 2, 1) */
		.c1 .c2 div { 
			color: blue;
		}
		
		/* (0, 1, 0, 1) */
		div #box3 {
			color:green;
		}
		
		/* (0, 1, 0, 1) */
		#box1 div {
			color:yellow;
		}
	</style>
</head>
<body>
	<div id="box1" class="c1">
		<div id="box2" class="c2">
			<div id="box3" class="c3">
				这行文本是什么颜色的？
			</div>
		</div>
	</div>
</body>

结果：yellow

第五题

<head>
	<meta charset="UTF-8">
	<title>第5题: 全是继承的特殊情况</title>
	<style>
		/* 都是继承, 继承里面谁高, 看继承哪个父级, 哪个父级高, 哪个选择器生效 */

		/* 继承 */
		div p {
			color:red;
		} 

		/* 继承 */
		.father {
			color:blue;
		} 
	</style>
</head>
<body>
	<div class="father">
		<p class="son"> 
			<span>文字</span>
		</p>
	</div>
</body>

结果：red

Youser511

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS权重叠加计算案例

第一题<head> <meta charset="utf-8"> <title>第1题：普通题</title> <style> /* (行内, id, 类, 标签) */ /* !important 最高 */ /* 继承: 最低 */ /* (0, 2, 0, 0) */ #father #son { color:blue; } /* (0, 1, 1, 1) */ #father p.c
复制链接

扫一扫