likes
comments
collection
share

【CSS 教程系列第 9 篇】什么是 CSS 中的子代选择器

作者站长头像
站长
· 阅读数 12

这是【CSS 教程系列第 9 篇】,如果觉得有用的话,欢迎关注专栏。

CSS 的选择器有很多,常用的有 元素选择器id 选择器class 选择器后代选择器子代选择器并集选择器交集选择器伪类选择器通配符选择器 等。

本篇博客说的是子代选择器,详细内容如下

子代选择器

与后代选择器不同,子代选择器只选择父级元素的亲一代。

1:写法

在父级元素的后面,加上一个 > 符号(大于号),表示这是亲一代,后面再写上子级元素即可。如下图所示

【CSS 教程系列第 9 篇】什么是 CSS 中的子代选择器

2:举例说明

如下代码所示

<body>
	<ul>
		<li>
			<p>一级菜单</p>
			<div>
				<p>二级菜单</p>
			</div>
		</li>
	</ul>
</body>

题目要求

将一级菜单的文本颜色设置为蓝色。

分析

如果你用后代选择器,不仅"一级菜单"的文本颜色会被改为蓝色,下面的二级菜单也会被改变。显然这不符合题目要求,我们需要选中的是 li 元素的 p 元素,而不是 li 元素中 div 元素的 p 元素,所以这里用子代选择器。

CSS 代码如下

ul li>p {
    color: blue;
}

浏览器运行效果如下

【CSS 教程系列第 9 篇】什么是 CSS 中的子代选择器

3:后代、子代选择器的区别

后代选择器子代选择器
后代选择器选中的是指定元素的所有后代,父子级之间用空格连接子代选择器只选中父级元素的亲一代,父子级之间用 > 号连接

你的问题得到解决了吗?欢迎在评论区留言。

赠人玫瑰,手有余香,如果觉得文章不错,希望可以给个一键三连,感谢。


结束语

技术是一点一点积累的,大神也不是一天就可以达到的。原地不动就是退步,所以每天进步一点点。 最后,附上一句格言:"好学若饥,谦卑若愚",望共勉。