css2.09_其他选择器的补充

最新推荐文章于 2024-07-20 16:31:22 发布

lianghe_work

最新推荐文章于 2024-07-20 16:31:22 发布

阅读量561

点赞数 4

CC 4.0 BY-SA版权

分类专栏： css

本文链接：https://blog.youkuaiyun.com/lianghe_work/article/details/52836892

css 专栏收录该内容

7 篇文章

订阅专栏

本文详细介绍了CSS中的不同选择器类型，包括儿子选择器、序选择器及下一个兄弟选择器，并通过示例展示了它们如何应用于HTML元素以实现精确的样式控制。

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

儿子选择器>：

div>p{
			color: red;
		}

IE6不兼容、IE7开始兼容，>符号就是儿子选择器

我们先看看后代选择器的示例（引出儿子选择器）：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		div p{
			color: red;
		}
	</style>
</head>
<body>
	<div>
		<p>我是段落1</p>
		<p>我是段落2</p>
		<ul>
			<li>
				<p>我是段落3</p>
			</li>
		</ul>
	</div>
</body>
</html>

运行结果：

我们通过上面代码可以看出，所有的p都是div的后代，所以运行的结果发现所有p都变红色了，接下来我们在看看要讲的儿子选择器

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		div>p{
			color: red;
		}
	</style>
</head>
<body>
	<div>
		<p>我是段落1</p>
		<p>我是段落2</p>
		<ul>
			<li>
				<p>我是段落3</p>
			</li>
		</ul>
	</div>
</body>
</html>

运行的结果：

我们看出只有段落1与段落2变红，原因是段落1与段落2才是div的儿子，而段落3只是div的后代，不是div的儿子，所以没有变红

序选择器：

:冒号表示序选择器

div p:first-child{
			color: red;
		}

接下来我们看看示例：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		div p:first-child{
			color: red;
		}
	</style>
</head>
<body>
	<div>
		<p>我是段落1</p>
		<p>我是段落2</p>
		<ul>
			<li>
				<p>我是段落3</p>
			</li>
		</ul>
	</div>
</body>
</html>

运行结果：

原因：段落1是div的第一个孩子，所以变红。段落3是div后代中li标签的第一个孩子，所以段落3也变成了红

注意：

除了:first-child还有：:first-letter最后一个孩子

下一个兄弟选择器+

+表示下一个兄弟选择器

h2+p{
			color: red;
		}

我们来看一下示例：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		h2+p{
			color: red;
		}
	</style>
</head>
<body>
	<div>
		<h2>我是一个标题</h2>
		<p>我是段落1</p>
		<p>我是段落2</p>
		<p>我是段落3</p>
		<h2>我是一个标题</h2>
		<p>我是段落1</p>
		<p>我是段落2</p>
		<p>我是段落3</p>
		<h2>我是一个标题</h2>
		<p>我是段落1</p>
		<p>我是段落2</p>
		<p>我是段落3</p>
		<h2>我是一个标题</h2>
		<p>我是段落1</p>
		<p>我是段落2</p>
		<p>我是段落3</p>
	</div>
	

	</div>

</body>
</html>

运行的结果：