一般來說我們寫CSS選擇器時，傾向於直接用空格隔開，比如 div p 。 

但是這種選擇器選擇範圍太廣，當我們想定位到個別元素，又不想使用獨立的類時，就不方便了。

因此，最近的學習中遇到幾個不常用，但是很好用的選擇器：

第1個" >"：

所有主流瀏覽器都支援 element>element 選擇器。

註釋：對於 IE8 及更早版本的瀏覽器中的 element>element，必須宣告 <!DOCTYPE>。

其實這個選擇器，還可以這麼描述：

div > p: 選中div下的所有第一級p元素。舉個栗子，採用如下的方式，span標籤中的內容就無法被選中了。

<div>
    <span>
        <p>我是唐老鴨。</p>
    </span>
    <p>我住在 Duckburg。</p>
</div>

第2個" +"：

所有主流瀏覽器都支援 element+element 選擇器。

註釋：對於 IE8 及更早版本的瀏覽器中的 element+element，必須宣告 <!DOCTYPE>。

這個選擇器其實選中的是div之後緊鄰的第一個p元素。

<div>
    <p>我是唐老鴨。</p>
    <p>我住在 Duckburg。</p>
</div>

<p>我最好的朋友是米老鼠。</p>

<p>我的樣式不會改變。</p>

第3個" nth-child"：

所有主流瀏覽器均支援 :nth-child() 選擇器，除了 IE8 及更早的版本。

nth-child( n ) , 這個選擇器不支援IE8，但是在一些大型的網站上都有使用，用起來感覺還是挺方便的。

參考文件：

http://www.w3school.com.cn/cssref/css_selectors.asp