怎么使用html5中的后代选择器？后代选择器的用法详解!

猿友 2021-05-31 10:13:02 浏览数 (3672)

反馈

最近网上很多小伙伴就在问，怎么使用html5中的后代选择器？看到这我就有点想说的了，对于怎么使用html5中的后代选择器，这个问题其实还是蛮重要的。对于想要从事互联网这块功的话算是基本都要有所了解的。那么接下来我门就来说说怎么后代选择器的用法！

用法一：

后代选择器

我门开始要了解的是，在 html 中拥有两种选择器，一个是子元素选择器，另一个是后代选择器，那么我们先来说说后代选择器的用法吧!

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>选择器</title>
	</head>
	<body>
		<div>
			<div class="box-one">
				<ul class="div-inside">					<li>第一条文字</li>
					<li>第二条文字</li>
				</ul>
			</div>
		</div>
	</body>
</html>

	.box-one ul li{
				/* 输入样式 */
			}

我们根据 html 中的代码来书写 css 样式，说明了后代选择器是由于多个选择器组成的，而且我们可以像 css 代码块中的写法一样在选择器与选择器两者中用空格隔开，其实简单的来说后代选择器的用法就是呢，只要一个元素是另一个元素的子元素就可以使用了。

方法二：

子元素选择器

对于子元素选择器的使用方法，在实际的运用中也是由于多个选择器组合起来的，但是呢，在这个子元素选择器中各个元素之间是用“>”这个符号隔开的，在我们使用的时候子元素选择器的使用要求是要两个相邻元素满足是直接的父子关系的。

.div-inside>li{
				/* 输入样式 */
			}

如代码中所示，我们在使用的时候应遵循子元素选择器的一个应用，而不用打破这个规则否者就不能运行。

小结：

对于以上的话就是今天的一个有关于怎么使用html5中的后代选择器和后代选择器的用法的解释了，希望这些经验对大家有所帮助，对于选择器不太了解的小伙伴可以在CSS选择器-菜鸟编程中进行一个系统的学习和了解。