CSS继承性与层叠性相关问题

最新推荐文章于 2024-08-09 22:30:35 发布

once_now

最新推荐文章于 2024-08-09 22:30:35 发布

阅读量170

点赞数

分类专栏： Web前端开发文章标签： css 继承

本文链接：https://blog.csdn.net/once_now/article/details/53768957

版权

Web前端开发专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>Document</title>
	<style type="text/css">
	 .ys2 .ys3{
     	color:blue;
     }

	 .ys1 .ys3{
     	color: red;
     }  
     /*hongse*/
	</style>
</head>
<body>
	<div class="ys1">
		<div class="ys2">
			<div class="ys3">
				<p>文字的颜色？</p>
			</div>
		</div>
	</div>
</body>
</html>

运行结果为：

文字的颜色？

为什么红色呢?

Css层叠性可知:

1. 当一个标签被直接选中时，我们需要数权重（id数量，类数量，标签数量），表现权重大的样式，如果一样大，谁写在CSS样式表相对后面的位置，就执行谁的样式。

2. 当一个标签未被直接选中，通过继承被影响，应遵从就近原则，谁近就受谁影响。

分析上题：

1.<p>未被直接选中，可知是通过继承影响，应遵从就近原则，但是发现，两者一样近。

2.这时候，就应该考虑权重，但是两者权重也相同，

3.接下来应该比较谁写在后面，发现.ys2ys3写在后面，故该段文字的颜色为红色。

once_now

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS继承性与层叠性相关问题

Document .ys2 .ys3{ color:blue; } .ys1 .ys3{ color: red; } /*hongse*/ 文字的颜色？运行结果为：文字的颜色？为什么红色呢?Css层叠性可知:1. 当一个标签被直接选中时
复制链接

扫一扫