後代和子代選擇器
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>