css权重题

最新推荐文章于 2023-01-29 16:47:41 发布

触不可及的Allen

最新推荐文章于 2023-01-29 16:47:41 发布

阅读量253

点赞数

分类专栏： css 文章标签： css

本文链接：https://blog.csdn.net/Jy123_/article/details/105817861

版权

css 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">

<head>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
	<title>第1题</title>
	<style type="text/css">
		#father #son {
			color: blue;
		}

		#father p.c2 {
			color: black;
		}

		div.c1 p.c2 {
			color: red;
		}

		#father {
			color: green !important;
			/* 继承的权重为0 */
		}
	</style>
</head>

<body>
	<div id="father" class="c1">
		<p id="son" class="c2">
			试问这行字体是什么颜色的？
		</p>
	</div>
</body>

</html>

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta http-equiv="content-type" content="text/html;charset=utf-8" />
		<title>第2题</title>
		<style type="text/css">
			#father{
				color:red;/* 继承的权重为0 */
			}
			p{
				color:blue;  
			}
		</style>
	</head>
	<body>
		<div id="father">
			<p>试问这行字体是什么颜色的？</p>
		</div>
	</body>
</html>

<!DOCTYPE html>
<html lang="en">

<head>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
	<title>第3题</title>
	<style type="text/css">
		div p {
			color: red;
		}

		#father {
			color: red;
		}

		p.c2 {
			color: blue;
		}
	</style>
</head>

<body>
	<div id="father" class="c1">
		<p class="c2">
			试问这行字体是什么颜色的？
		</p>
	</div>
</body>

</html>

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta http-equiv="content-type" content="text/html;charset=utf-8" />
		<title>第4题</title>
		<style type="text/css">
			div div{ 
				color:blue;
			}
			div{
				color:red;
			}
		</style>
	</head>
	<body>
		<div>
			<div>
				<div>
					试问这行字体是什么颜色的？
				</div>
			</div>
		</div>
	</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>Document</title>
	<style type="text/css">
		div div div div div div div div div div div div{  
			color:red;
		}
		.me{ 
			color:blue;
		}
	</style>
</head>
<body>
	<div>
		<div>
			<div>
				<div>
					<div>
						<div>
							<div>
								<div>
									<div>
										<div>
											<div>
												<div class="me">试问这行文字是什么颜色的</div>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">

<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>Document</title>
	<style type="text/css">
		.c1 .c2 div {
			color: blue;
		}

		/* 权重一样比优先级 */
		div #box3 {
			color: green;
		}

		#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>

</html>

触不可及的Allen

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
css权重题

<!DOCTYPE html><html lang="en"><head> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <title>第1题</title> <style type="text/css">...
复制链接

扫一扫

专栏目录