派生選擇器用的很多，派生選擇器具體包括為后代選擇器、子元素選擇器、相鄰兄弟選擇器，我們來理解一下他們之間的具體用法與區別。
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>
運行結果：
即，無論你在哪里，我都要選中你，因為你是我的后代。
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被選中。