css2.6_后代选择器

最新推荐文章于 2022-09-26 21:29:12 发布

原创最新推荐文章于 2022-09-26 21:29:12 发布 · 554 阅读

1 ·

CC 4.0 BY-SA版权

css 专栏收录该内容

7 篇文章

订阅专栏

本文详细介绍了CSS后代选择器的应用场景及使用方法，通过实例展示了如何精确地为元素及其后代应用样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题引入

我们的需求是讲段1、2、3变成红色，而段落4、5、6变成蓝色

如果我们用标签选择器会出现什么效果呢？

浏览器运行的效果：

这说明标签选择器在这种情况下满足不了我们的需求，为了实现这种需求我们可以选择后代选择器。

后代选择器

先看看代码示例：

浏览器运行的结果：

.div1 p{
			color:red;
		}

现这种以空格隔开的叫后选择器，这里一定要注意是后代选择器，不是儿子或者孙子选择器，比如我们来看下一个代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>后代选择器</title>
	<style type="text/css">
		.div1 p{
			color:red;
		}

		.div2 p{
			color: green;
		}
	</style>
</head>
<body>

	<div class=div1>
		<ul>
			<li>
				<p>段落1</p>
				<p>段落2</p>
				<p>段落3</p>
			</li>
		</ul>	
	</div>

	<div class="div2">
		<p>段落4</p>
		<p>段落5</p>
		<p>段落6</p>
	</div>
</body>
</html>

运行结果：

通过上面的代码我们可以发现p并不是.div1儿子，孙子，但是段落1、2、3都能变红

原因是p是.div1的后代，只要p是.div1的后代不管是儿子、孙子等都会被选择器选择上

后代选择器中的空格可以多次存在

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>后代选择器</title>
	<style type="text/css">
		.div1 .li1 p{
			color: red;
		}
	</style>
</head>
<body>

	<div class=div1>
		<ul>
			<li>
				<p>段落1</p>
				<p>段落2</p>
				<p>段落3</p>
			</li>
			<li class="li1">
				<p>段落4</p>
				<p>段落5</p>
				<p>段落6</p>
			</li>
		</ul>	
	</div>

</body>
</html>

运行结果：

我们一起来分析上面代码中的小块代码：

.div1 .li1 p{
			color: red;
		}

解读：div1的后代中.li1后代中的p标签变红，所以我们看到了上面的段落4、5、6变成红色

注意：

上面的代码都是以类选择器.div1后代选择来说明的，其实id选择也是可以的，通用的而比如下面代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>后代选择器</title>
	<style type="text/css">
		#div1 .li1 p{
			color: red;
		}
	</style>
</head>
<body>

	<div id=div1>
		<ul>
			<li>
				<p>段落1</p>
				<p>段落2</p>
				<p>段落3</p>
			</li>
			<li class="li1">
				<p>段落4</p>
				<p>段落5</p>
				<p>段落6</p>
			</li>
		</ul>	
	</div>

</body>
</html>

注意如果是id选择器div1那么在css中就不能用.而是用#