CSS——后代选择器

最新推荐文章于 2025-02-19 09:30:00 发布

原创最新推荐文章于 2025-02-19 09:30:00 发布 · 805 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#css

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

128 篇文章

订阅专栏

css

32 篇文章

订阅专栏

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

	<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无法生效，因为祖先顺序不对。