CSS——后代选择器

最新推荐文章于 2024-03-12 20:08:25 发布

mintsolace

最新推荐文章于 2024-03-12 20:08:25 发布

阅读量672

点赞数

分类专栏：学习笔记 css 文章标签： css

本文链接：https://blog.csdn.net/mintsolace/article/details/77945578

版权

学习笔记同时被 2 个专栏收录

128 篇文章 2 订阅

订阅专栏

css

32 篇文章 1 订阅

订阅专栏

后代选择器：当需要把某一个部分的所有内容进行样式改变，就要想到后代选择器。后代选择器描述的是祖先结构。

	<style type="text/css">
		.div1 p{
			color:red;
		}
	</style>

空格即表示后代，.div1 p就是.div1的后代的所有p，如下：

	<style type="text/css">
	.div1 p{
		color:red;
	}
	</style>
</head>
<body>
	<div class="div1">
		<p>段落</p>
		<p>段落</p>			
		<p>段落</p>
	</div>
	<div>
		<p>段落</p>
		<p>段落</p>			
		<p>段落</p>	
	</div>

空格可以多次出现，比如以下就是.div1里面的后代.li2里面的p：

	<style type="text/css">
		.div1 li2 p{
			color:red;
		}
	</style>
</head>
<body>
	<div class="div1">
		<ul>
			<li>
				<p>pages</p>
				<p>pages</p>
				<p>pages</p>
			</li>
			<li class="li2">
				<p>pages</p>
				<p>pages</p>
				<p>pages</p>
			</li>
		</ul>
	</div>
</body>

假设1：

	<style type="text/css">
		.div1 .div3 p{
			color:red;
		}
	</style>
</head>
<body>
	<div class="div1">
		<div class="div2">
			<div class="div3">
				<div class="div4">
					<p>猜猜我是什么颜色嘻嘻嘻</p>	
				</div>
			</div>
		</div>
	</div>
</body>

假设2：

	<style type="text/css">
		div div p{
			color:red;
		}
	</style>
</head>
<body>
	<div class="div1">
		<div class="div2">
			<div class="div3">
				<div class="div4">
					<p>猜猜我是什么颜色嘻嘻嘻</p>	
				</div>
			</div>
		</div>
	</div>
</body>

假设3：

	<style type="text/css">
		div .div2 div div p{
			color:red;
		}
	</style>
</head>
<body>
	<div class="div1">
		<div class="div2">
			<div class="div3">
				<div class="div4">
					<p>猜猜我是什么颜色嘻嘻嘻</p>	
				</div>
			</div>
		</div>
	</div>
</body>

假设4：

	<style type="text/css">
		div .div2 div p{
			color:red;
		}
	</style>
</head>
<body>
	<div class="div1">
		<div class="div2">
			<div class="div3">
				<div class="div4">
					<p>猜猜我是什么颜色嘻嘻嘻</p>	
				</div>
			</div>
		</div>
	</div>
</body>

以上四种假设的选择器都可以生效。

假设5：

	<style type="text/css">
		div2 .div1 .div3 .div4{
			color:red;
		}
	</style>
</head>
<body>
	<div class="div1">
		<div class="div2">
			<div class="div3">
				<div class="div4">
					<p>猜猜我是什么颜色嘻嘻嘻</p>	
				</div>
			</div>
		</div>
	</div>
</body>

假设6：

	<style type="text/css">
		div div .div4 div p{
			color:red;
		}
	</style>
</head>
<body>
	<div class="div1">
		<div class="div2">
			<div class="div3">
				<div class="div4">
					<p>猜猜我是什么颜色嘻嘻嘻</p>	
				</div>
			</div>
		</div>
	</div>
</body>

假设5和假设6无法生效，因为祖先顺序不对。

mintsolace

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS——后代选择器

1.后代选择器： style type="text/css"> .div1 p{ color:red; } style>空格即表示后代，.div1 p就是.div1的后代的所有p，如下： style type="text/css"> .div1 p{ color:red; }
复制链接

扫一扫

专栏目录