后代选择器

时间 2021-08-15 标签 html5后代和隔代选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>后代选择器</title>
		<style type="text/css">
			.font1{
				font-size: 1cm;
				color: yellow;
			}
			/*交集选择器*/
			h1.font1{
				border: 2px dotted black;
			}
			h1#id1{
				background-color:red;
			}
		</style>
	</head>
	<body>
		<!--交集选择器-->
		<p class="font1" >p标签</p>
		<h1 class="font1" id="h_1">h1标签</h1>
		<h1 id="id1">h1第二个标签</h1>
		<p>p标签的第二个标签</p>
	</body >
</html>

以上是标准后代选择器

下面是儿子代选择器，排除孙子

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>后代-儿子</title>
		<style type="text/css">
			
			article >p{
				border: 2px double blue;
			}
			
		</style>
	</head>
	<body>
		<article>
			<p>段落1</p>
			<p>段落1</p>
			<section>
				<p>段落3</p>
				<p>段落4</p>
			</section>
		</article>
	</body>
</html>

下面是隔代选择器，也就是决定孙子选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>后代-儿子</title>
		<style type="text/css">
			
			article * p{
				border: 2px double blue;
			}
			
		</style>
	</head>
	<body>
		<article>
			<p>段落1</p>
			<p>段落1</p>
			<section>
				<p>段落3</p>
				<p>段落4</p>
			</section>
		</article>
	</body>
</html>