選擇器（selector）是CSS裡面非常重要地一部分知識。

根據我暫時淺薄地理解，CSS就是對一份HTML程式碼裡面的元素進行運用各種樣式。

所以，第一步就是要準確地定位你想要運用樣式的元素。

CSS裡面通過各種選擇器來定位元素。 CSS裡面選擇器有很多種，今天就只想說說 “派生選擇器”。
一聽“派生選擇器”這個名字，我真心做不到見名知義地感覺它是什麼選擇器。一看英文名叫“contextual selectors” ,如果直譯就叫“上下文選擇器”。雖然名字不文雅，但是我更偏向這個名字。
contexual selector是通過依據元素在其位置的上下文關係來定義樣式的。
上下文選擇器的情況有三種：後代選擇器，子元素選擇器，相鄰兄弟選擇器。 

後代選擇器（descendant selector)

eg:
HTML程式碼：
    <h1>This is a<em>important</em>heading</h1>
CSS程式碼： 
    h1 em {color:red;}
語法規則是 h1 和 em 之間有一個空格。那麼這一條CSS程式碼就會運用於包含在<h1></h1>標籤內的所有<em>元素。
關於後代選擇器，很重要的一點是第一個引數和第二個引數之間的代數是可以無限的。eg:
HTML程式碼：
<ul> 
    <li>
        <ul>
            <li>
                <em>

子選擇器（child selector)

子選擇器只會選擇某個元素的子元素，而不會擴大到任意的後代元素。
eg：
HTML程式碼：
<h1>This is <strong>This will be styled.

相鄰兄弟選擇器會選擇某一元素緊隨其後的元素，但是前提是他們擁有相同的父級。eg：
HTML程式碼：
<h1>
    <h2>This is a heading<h2>
    <strong>This will be styled.</strong>
    <strong>This will not be styled.</strong>
<h1>
CSS程式碼：
h2 + strong {color:red;} 

語法規則是h2和strong之間有一個“＋”，“＋”和前面的h1或者後面的strong之間的空格都是可有可無的。
在 以上例子中，第一個strong緊鄰著h2並且他們擁有相同的父級(h1)，所以h2 + strong會選擇到第一個<strong>而不會選到第二個<strong>.
eg2:
HTML程式碼：
<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>
CSS程式碼：
li + li {color:red;}

在以上的例子中li+li是選擇緊挨著li後面的第一個<li>，所以第一個<li>不會被選擇；而第二個<li>是緊挨著第一個li的，所有會被選擇；第三個<li>是緊挨著第二個<li>的，也會被選擇。