CSS3 :nth-child() 选择器---挖坑

E:nth-child(n)

语法：

E:nth-child(n) { sRules }

说明：

匹配父元素的第n个子元素E，假设该子元素不是E，则选择符无效。(也就是说，会检查从body开始的每个元素的第N个子元素是不是E元素，如果是的话，就附加上相应的CSS样式)

• 要使该属性生效，E元素必须是某个元素的子元素，E的父元素最高是body，即E可以是body的子元素
• 该选择符允许使用一个乘法因子(n)来作为换算方式，比如我们想选中所有的偶数子元素E，那么选择符可以写成：E:nth-child(2n)

CSS :before 选择器

实例

在每个 <p> 元素的内容之前插入新内容：

p:before
{ 
content:"台词：";
}

台词：我是唐老鸭。 注意：加入的content是用鼠标无法选择的

element>element	div>p	选择父元素为 <div> 元素的所有 <p> 元素。	2
element+element	div+p	选择紧接在 <div> 元素之后的所有 <p> 元素。	2
[attribute]	[target]	选择带有 target 属性所有元素。	2
[attribute=value]	[target=_blank]	选择 target="_blank" 的所有元素。	2
[attribute~=value]	[title~=flower]	选择 title 属性包含单词 "flower" 的所有元素。	2
[attribute|=value]	[lang|=en]	选择 lang 属性值以 "en" 开头的所有元素。	2

:first-child

p:first-child

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

2

E:nth-of-type(n)

语法：

E:nth-of-type(n) { sRules }

说明：

匹配同类型中的第n个同级兄弟元素E。

• 要使该属性生效，E元素必须是某个元素的子元素，E的父元素最高是html，即E可以是html的子元素，也就是说E可以是body
• 该选择符总是能命中父元素的第n个为E的子元素，不论第n个子元素是否为E
• 有一点需要注意的是：

  HTML示例代码：

  <div> <p>第1个p</p> <p>第2个p</p> <span>第1个span</span> <p>第3个p</p> <span>第2个span</span> </div>

  如上HTML，假设要命中第一个span：

  span:nth-of-type(1){color:#f00;}

  如果使用E:nth-child(n)：

  span:nth-child(3){color:#f00;}

  :first-of-type	p:first-of-type	选择属于其父元素的首个 <p> 元素的每个 <p> 元素。	3
  :last-of-type	p:last-of-type	选择属于其父元素的最后 <p> 元素的每个 <p> 元素。	3
  :only-of-type	p:only-of-type	选择属于其父元素唯一的 <p> 元素的每个 <p> 元素。	3
  :only-child	p:only-child	选择属于其父元素的唯一子元素的每个 <p> 元素。

  :enabled	input:enabled	选择每个启用的 <input> 元素。	3
  :disabled	input:disabled	选择每个禁用的 <input> 元素	3
  :checked	input:checked	选择每个被选中的 <input> 元素。	3
  :not(selector)	:not(p)	选择非 <p> 元素的每个元素。	3
  ::selection	::selection	选择被用户选取的元素部分。	3