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

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

1. :first-child 选择器

比如

<ul><li></li>

　　　　<li></li>
　　　　
　　　　<li></li>
</ul>

要选中第一个li，则使用 li:first-child{}，而不是ul:first-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:nth-child(1)不能匹配到

  元素，要匹配

  则写为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选择器

  选中当前鼠标选中的元素

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