CSS :nth-child选择器终于搞清楚怎么用，实例详解

:nth-child选择器

刚接触到CSS的:nth-child伪类选择器的时候，也是晕头转向的，搞不清楚“:nth-child(n) 选择器选择的是其父元素中的第 n 个子元素,而且元素没有类型限制”这句话是什么意思。后来，经过资料的搜寻和不断的实例尝试，终于有些思路和头绪了，今分享于此，仅为个人理解，仅供参考。

语法

A:nth-child( n ){样式设置}

提示：其中参数n可以是数字、关键字odd和even，也可以是公式。

该选择器选择的是A选择器选择的元素的父元素中的第n个子元素，而且在匹配的阶段并没有元素类型的限制，但是，到了样式设置的阶段，却又有了元素类型的限制，比如p:nth-child(n)匹配p元素的父元素中的第n个元素，如果第n个元素刚好是p，则进行样式设置，如果不是p，比如是h2，则不会进行相关的样式设置。具体见下方的实例代码。

CSS :nth-child选择器终于搞清楚怎么用，实例详解

:nth-child选择器实例代码，及在线编辑器

  
这是p下的第一个子元素
  
这是第二个子元素
  
第三个子元素，为元素h5
  
第四个
  
这是第五个，为元素p
  
这是第六个，也是h5

使用在线编辑器，请参考原文：

CSS :nth-child选择器到底怎么用，实例详解 - CSS教程

参数n为关键字odd和even

:nth-child(n)选择器中的n为odd表示匹配排序为奇数的子元素，even表示匹配排序为偶数的子元素，如下实例代码：

  
1
  
2
  
3
  
4
 
  
5

CSS :nth-child选择器终于搞清楚怎么用，实例详解

参数n为公式

:nth-child(n)中的n的值也可以是公式的形式，比如2n将匹配偶数，2n+1将匹配奇数，实例代码如下：

  
python
  
CSS
  
HTML
  
JS
 
  
go

python全栈编程：

笨鸟工具-璞玉天成，大器晚成