复合选择器- 后代选择器

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

剩下了什么

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

阅读量768

点赞数

分类专栏： CSS

本文链接：https://blog.youkuaiyun.com/J8638/article/details/106125560

版权

CSS 专栏收录该内容

15 篇文章

订阅专栏

后代选择器又称为包含选择器

作用：用来选择元素或元素组的**子孙后代**

其写法就是把外层标签写在前面，内层标签写在后面，中间用**空格**分隔，先写父亲爷爷，在写儿子孙子。

父级子级{属性:属性值;属性:属性值;}

语法：.class h3{color:red;font-size:16px;}

当标签发生嵌套时，内层标签就成为外层标签的后代。
子孙后代都可以这么选择。或者说，它能选择任何包含在内的标签。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style>
		.nav a{
			color: pink;
		}
		
		.wangsicong ul li{
			
			color: red;
		}
		
		
		
	</style>
	<body>
		<div class="nav">
			<a href="#">内部链接</a>
			<a href="#">内部链接</a>
			<a href="#">内部链接</a>
		</div>
		<a href="#">外部链接</a>
		<a href="#">外部链接</a>
		<a href="#">外部链接</a>
		<ul>
			<li>一条狗</li>
			<li>一条狗</li>
			<li>一条狗</li>
		</ul>
		<div class="wangsicong">
			<ul>
				<li>王可可是一条狗</li>
				<li>王可可是一条狗</li>
				<li>王可可是一条狗</li>
			</ul>
		</div>
	</body>
</html>