css子选择器 :frist-child :nth-child(n) :nth-of-type(n) ::select选择器

记录一下前一段时间使用、学习的几种选择器。

1.　　:frist-child 选择器n

比如<ul><li></li>

　　　　<li></li>

　　　　<li></li></ul>

要选中第一个li，则使用 li:frist-child{}，而不是ul:frist-child{}，将会选中第一个li标签

如果ul下第一个元素不是 li， li:frist-child就失效了。突然感觉好鸡肋。。

2.　　:nth-child(n)选择器

选择属于其父元素的第n个子元素，计数从1开始，而不是0。IE浏览器不支持。

n可以是数字，也可以是odd、even，也可以是数学算式

比如<ul>

　　　　<p></p>

　　　　<li></li>

　　　　<li></li>

　　　　<li></li></ul>

（1）要选中第一个li。使用   li:nth-child(2)  ，li: 只能匹配<li>元素，写成 li:nth-child(1)不能匹配到<p>元素，要匹配<p>则写为p:nth-child(1)

这里，网上教程表示：该选择器选取父元素的第 N 个子元素，与类型无关。经过实验，发现与类型有关，用的时候需要自己再验证一下。

（2）odd 和 even 是可用于匹配下标是奇数或偶数的子元素的关键词（第一个子元素的下标是 1）

　　选中下标是奇数的 li 元素：li:nth-child(odd)

（3）使用公式 (an + b)。描述：表示周期的长度，n 是计数器（从 0 开始），b 是偏移值。

　选中下标是 2 的倍数的所有 li 元素：li:nth-child(2n)

3.　　:nth-of-type(n)选择器

:nth-of-type(n) 选择器匹配属于父元素的特定类型的第 N 个子元素的每个元素.

n 可以是数字、关键词或公式

比如<ul>

　　　　<p></p>

　　　　<li></li>

　　　　<li></li>

　　　　<li></li></ul>

要选择第一个 li 元素，就是 li:nth-of-type(1)，注意这里与:nth-child(n)选择器的区别

4.　　::select选择器

选中当前鼠标选中的元素

一般选中的文本是蓝色背景，可以用此改变为粉色！