本文目录一览：
- 1、nth-child什么理解
- 2、CSS中:nth-child的用法
- 3、深入理解nth-child和nth-of-type
- 4、js里面怎么使用nth-child选择器
nth-child什么理解
nth-child 不区分子元素的类型，而 ：nth-of-type 则区分子元素的类型。
也就是说：ele：nth-of-type(n)是指父元素下第n个ele元素， 而ele：nth-child(n)是指父元素下第n个元素且这个元素为ele，若不是，则选择失败。
nth-child(n) 选择器匹配父元素中的第 n 个子元素，元素类型没有限制。：nth-of-type(n)选择器匹配同类型中的第n个同级兄弟元素。n可以是一个数字，一个关键字，或者一个公式。
nth-child(n) 选择器匹配属于其父元素的第 N 个子元素，不论元素的类型。例如选第2个就直接：nth-child(2)：eq() 选择器选取带有指定 index 值的元素。
如果在 h1 之后增加一个 h2，那么 ：nth-child 选择符就什么也选中不了了，因为那时第二个子元素就不再是段落元素 p 了。但是 ：nth-of-type 仍然还是有效的。
CSS中:nth-child的用法
1、nth-child 是CSS伪类，它首先找到所有当前元素的兄弟元素，然后按照位置 先后顺序从1开始排序 ，选择的结果为CSS伪类：nth-chilid括号中表达式（an+b）匹配到的元素集合。（n=0，1，2，3）。
2、nth-child(n)用法：在开发过程中，会碰到一些选择器的需求：例如使列表中的第一项或者最后一项显示不同的样式 、列表中的奇数或者偶数项显示不同的背景色 等等。
3、nth-child(n) 父元素下的第n个子元素，n必须大于0，索引都是从1开始。
4、在CSS中可使用：nth-child()选择器来实现表格隔行变色效果。：nth-child()选择器用于根据元素在一组兄弟中的位置来匹配元素；它匹配第n个子元素。
5、nth-child(n) 选择器匹配属于其父元素的第 N 个子元素，不论元素的类型。例如选第2个就直接：nth-child(2)：eq() 选择器选取带有指定 index 值的元素。
6、nth-child可以选择父元素下的字元素，：nth-of-type也可以。但是它们到底有什么区别呢？ 其实区别很简单：nth-of-type为什么要叫：nth-of-type？因为它是以type来区分的。
深入理解nth-child和nth-of-type
其实区别很简单：nth-of-type为什么要叫：nth-of-type？因为它是以type来区分的。
nth-child 不区分子元素的类型，而 ：nth-of-type 则区分子元素的类型。
定义 我们先来看下这两个选择器的定义：nth-child(n) 选择器匹配父元素中的第 n 个子元素，元素类型没有限制。：nth-of-type(n)选择器匹配同类型中的第n个同级兄弟元素。
一个是.box p：nth-child(2)，一个是.box p：nth-of-type(2)，括号里面都2，但是效果却不同。
p：nth-child(2){color：red；} p：nth-of-type(2){color：red；} 结果虽然相同，但是两者本身还是有所区别的。
js里面怎么使用nth-child选择器
ie-cssjs下载页面的每一个样式文件并解析它的CSS3伪选择器。如果一个选择器被找到，它就会被替换为同名的CSS class。比如：div：nth-child(2) 将会变成 div._iecss-nth-child-2 。
nth-child(n)用法：在开发过程中，会碰到一些选择器的需求：例如使列表中的第一项或者最后一项显示不同的样式 、列表中的奇数或者偶数项显示不同的背景色 等等。
正常写法是不加空格的，就是第二个div.one的背景色为bbffaa. 而加了空格，那jQuery只会认为是所有.one 下的子元素第二个。
first-child 选择器被用来选择父标签的第一个子标签，此是：nth-child(1)的简便形式。例如：(‘li：first-child’)—用来选择所有li的父标签的第一个li子标签。(‘tr：first-child’)—类似。
.nav li：nth-child(2) a { color： #ff0000}，这个能让标签里面的第二个li的a标签的颜色变为红色。：nth-child用倍数比较好用。
特别声明
本文仅代表作者观点，不代表本站立场，本站仅提供信息存储服务。