后代和子代选择器
CSS的选择器除了之前介绍的基本选择器之外，还有符合选择器，可以处理一些基本选择器无法处理的难题。
1、后代选择器
比如下面的例子，我们需要将所有的“Hello”选择出来，当然我们可以使用类选择器，但是要是p标签的数量有N个，岂不是要累死人的节奏。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试</title>
</head>
<body>
<div>和平精英</div>
<div>刺激战场</div>
<div>
<p>Hello</p>
</div>
<div>
<p>Hello</p>
</div>
<p>魔兽世界</p>
<p>灌篮高手</p>
</body>
</html>
这里就可以使用到后代选择器，后代选择器又称为包含选择器，用来选择元素或者元素组的后代，写法就是把外层标签写在前面，内层标签写在后面，中间用空格隔开，当标签发生嵌套时，内层标签就成为了外层标签的后代。
比如上面的例子，我们就可以这样写：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试</title>
<style>
div p{
color:deeppink;
}
</style>
</head>
<body>
<div>和平精英</div>
<div>刺激战场</div>
<div>
<p>Hello</p>
</div>
<div>
<p>Hello</p>
</div>
<p>魔兽世界</p>
<p>灌篮高手</p>
</body>
</html>
扩展一下，只要中间包含空格的都将称之为后代选择器，那么将后一个“Hello”变成紫色，我们就可以这样写：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试</title>
<style>
div p{
color:deeppink;
}
.hello p{
color: purple;
}
</style>
</head>
<body>
<div>和平精英</div>
<div>刺激战场</div>
<div>
<p>Hello</p>
</div>
<div class="hello">
<p>Hello</p>
</div>
<p>魔兽世界</p>
<p>灌篮高手</p>
</body>
</html>
2、子代选择器
跟后代选择器相对的还有子代选择器。
比如下面的例子，我们需要将“一级菜单”变成粉色，要是直接使用上面讲的后代选择器（所有的后代），那么所有的菜单都将变成粉色。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>子代选择器</title>
<style>
ul li a{
color: pink;
}
</style>
</head>
<body>
<ul>
<li>
<a href="#">一级菜单</a>
<div>
<a href="#">二级菜单</a>
<a href="#">二级菜单</a>
<a href="#">二级菜单</a>
</div>
</li>
</ul>
</body>
</html>
子代选择器的话我们需要用“>”进行分割，比如上面的例子，第一个“a”（也就是一级菜单），它是“li”的亲儿子，下面的顶多算他的孙子，那么我们要把一级菜单选出来就可以这样写：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>子代选择器</title>
<style>
ul li > a{
color: pink;
}
</style>
</head>
<body>
<ul>
<li>
<a href="#">一级菜单</a>
<div>
<a href="#">二级菜单</a>
<a href="#">二级菜单</a>
<a href="#">二级菜单</a>
</div>
</li>
</ul>
</body>
</html>