后代选择器

最新推荐文章于 2024-05-20 15:08:57 发布

今夕今年

最新推荐文章于 2024-05-20 15:08:57 发布

阅读量2.8k

点赞数 1

分类专栏：前端文章标签： html5后代和隔代选择器

本文链接：https://blog.csdn.net/baidu_31481511/article/details/88399055

版权

前端专栏收录该内容

14 篇文章 1 订阅

订阅专栏

<!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>

今夕今年

关注

1
点赞
踩
3

收藏

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

&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;后代选择器&lt;/title&gt; &lt;style type="text/css"&gt; .font1{ font-size: 1cm;
复制链接

扫一扫