CSS的2个冷门却又实用的选择器

一般来说我们写CSS选择器时，倾向于直接用空格隔开，比如 div p 。 

但是这种选择器选择范围太广，当我们想定位到个别元素，又不想使用独立的类时，就不方便了。

因此，最近的学习中遇到几个不常用，但是很好用的选择器：

第1个" >"：

element>element

div>p

选择父元素为 <div> 元素的所有 <p> 元素。

所有主流浏览器都支持 element>element 选择器。

注释：对于 IE8 及更早版本的浏览器中的 element>element，必须声明 <!DOCTYPE>。

其实这个选择器，还可以这么描述：

div > p: 选中div下的所有第一级p元素。举个栗子，采用如下的方式，span标签中的内容就无法被选中了。

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

第2个" +"：

element+element

div+p

选择紧接在 <div> 元素之后的所有 <p> 元素。

所有主流浏览器都支持 element+element 选择器。

注释：对于 IE8 及更早版本的浏览器中的 element+element，必须声明 <!DOCTYPE>。

这个选择器其实选中的是div之后紧邻的第一个p元素。

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

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

<p>我的样式不会改变。</p>

第3个" nth-child"：

:nth-child(n)

p:nth-child(2)

选择属于其父元素的第二个子元素的每个 <p> 元素。

3

所有主流浏览器均支持 :nth-child() 选择器，除了 IE8 及更早的版本。

nth-child( n ) , 这个选择器不支持IE8，但是在一些大型的网站上都有使用，用起来感觉还是挺方便的。

参考文档：

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