派生選擇器用的很多，派生選擇器具體包括為后代選擇器、子元素選擇器、相鄰兄弟選擇器，我們來理解一下他們之間的具體用法與區別。
1、css后代選擇器
語法：h1 em {color:red;} 表示的是從h1開始里面包含的所有的em元素變成紅色，h1為祖先，其他的em都是后代，即選中后代，不管是兒子還是孫子，只要是都會被選中，為后代選擇器。
例如
<html>
<head>
<style type="text/css">
ul em {color:red; font-weight:bold;}
</style>
</head>
<body>
<ul>
<li>List item 1
<ol>
<li>List item 1-1</li>
<li>List item 1-2</li>
<li>List item 1-3
<ol>
<li>List item 1-3-1</li>
<li>List item <em>1-3-2</em></li>
<li>List item 1-3-3</li>
</ol>
</li>
<li>List item 1-4</li>
</ol>
</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
</body>
</html>
即，無論你在哪里，我都要選中你，因為你是我的后代。
經常看見css的后代選擇器是這樣的寫法：
div.class 和 .class div 的形式兩者的區別：
div.class 是選中的類名為class 的div元素，與直接使用類選擇器.class不同，因為可能有其他的元素使用了class類名，比如<p class=""></p>,就不會被div.class選中；
.class div 是后代選擇器的一種，表示選中 類名為class的元素包含的所有的div元素；
2、css子元素選擇器
語法：h1>em{color:red;} 表示的是從h1開始里面的第一層em元素變成紅色，h1為祖先，em為兒子，就像世襲制一樣，只能傳給兒子，孫子和其他堂親都不行，例如
<style type="text/css">
h1 > strong {color:red;}
</style>
<h1>This is <strong>very</strong> <strong>very</strong> important.</h1>
<h1>This is <em>really <strong>very</strong></em> important.</h1>
只有第一個h1會變色。
3、相鄰兄弟選擇器
語法：h1 + p {margin-top:50px;} 表示是“選擇緊接在 h1 元素后出現的段落，h1 和 p 元素擁有共同的父元素”這是官方的說法，理解的誤區在於這個加號，h1和p並不是同時被選中的，而是選擇的是h1緊跟着后面的p元素，是遞進的關系，例如：
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
li + li {color:red;}
</style>
</head>
<body>
<div>
<ul>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
<ol>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ol>
</div>
</body>
</html>
li+li選擇的是第二個li，同理也可以理解成緊跟着第二個li的兄弟，即是第三個li，當然是在同一個級別下。所以出現第二、三li被選中。
完整示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Selector</title> <style> ul>li>em { color: red; font-weight: bold; } h1+p{ color:red; } </style> </head> <body> <ul> <li><em>List item 1</em> <ol> <li>List item 1-1</li> <li><em>List item 1-2</em></li> <li>List item 1-3</li> </ol> </li> <li> <em>List item 2</em> </li> <li> List item 3 </li> </ul> <h1>H1</h1> <p>param</p> <h2>H2</h2> </body> </html>
