nthchild,nthchildre
CSS中：nth-child的用法
做前端一定要记住:nth-child(2)这个选择器，它可以帮你轻松选择你想要的标签并给与修改添加样式
下面通过几个例子说明，相信你一看就明白
:nth-child(2)表示选取第几个标签，”2可以是你想要的数字”
:nth-child(n+4)选取大于等于4标签，”n”表示从整数
:nth-child(-n+4)选取小于等于4标签
:nth-child(2n)选取偶数标签，2n也可以是even
:nth-child(2n-1)选取奇数标签，2n-1可以是odd
:nth-child(3n+1)自定义选取标签，3n+1表示”隔二取一”
:last-child选取最后一个标签
:nth-last-child(3)选取倒数第几个标签,3表示选取第3个
nth-child 和 nth-type-of 的区别
:nth-child和:nth-of-type都是css3的结构伪类选择器，和他们相关的还有一堆其他的结构伪类选择器，如果搞懂了这两个选择器的话，相应的也能搞懂和他们相关的其他结构伪类选择器啦。
这两个选择器，可不像我们看起来的那么简单，他们的作用相近，却又不完全一样。
定义
我们先来看下这两个选择器的定义：
:nth-child(n) 选择器匹配父元素中的第 n 个子元素，元素类型没有限制。
:nth-of-type(n)选择器匹配同类型中的第n个同级兄弟元素。
n可以是一个数字，一个关键字，或者一个公式。
写个例子看下：
!DOCTYPE?html
html
head
meta?charset="UTF-8"
title:nth-child()和:nth-of-type()的区别/title
style
.box?p:nth-child(2){
color:#fff;
background:?orange;
}
/style
/head
body
div?class="box"
h2我是h2标签/h2
p我是.box里的第二个子元素，我是第一个p标签/p
p我是.box里的第三个子元素，我是第二个p标签/p
/div
/body
/html
效果如下：
请点击输入图片描述
!DOCTYPE?html
html
head
meta?charset="UTF-8"
title:nth-child()和:nth-of-type()的区别/title
style
.box?p:nth-of-type(2){
color:#fff;
background:?orange;
}
/style
/head
body
div?class="box"
h2我是h2标签/h2
p我是.box里的第二个子元素，我是第一个p标签/p
p我是.box里的第三个子元素，我是第二个p标签/p
/div
/body
/html
效果如下：
请点击输入图片描述
一个是.box p:nth-child(2)，一个是.box p:nth-of-type(2)，括号里面都2，但是效果却不同。那么到底这两个选择器是什么意思呢?
分析：
我们再来看下结构：
.box的子元素有三个，第一个是h2标签，第二个和第三个是p标签。
div?class="box"
h2我是h2标签/h2
p我是.box里的第二个子元素，我是第一个p标签/p
p我是.box里的第三个子元素，我是第二个p标签/p
/div
.box p:nth-child(2)
.box p:nth-child(2)的效果是选择出了第一个p标签，也就是.box里的第二个子元素。
请点击输入图片描述
翻译下：
1.确定了选择的是.box元素里面的p元素。
2.选择的是.box的子元素里面àp元素à的父元素里面的à第二个子元素。
3.我们来分析下第二点到底是什么意思：”.box的子元素里面àp元素”指的是这两个元素：
请点击输入图片描述
4.“ p元素à的父元素”指的就是.box这个元素：
请点击输入图片描述
5.“ 的父元素里面的à第二个子元素”的意思就是：.box这个元素里面的第二个子元素：
6.别忘记我们第1条里面的“确定了选择的是.box元素里面的p元素”，我们确定了这个第二个元素就是p元素，因此得出的效果是：
怎么样?现在明白.box p:nth-child(2)是什么意思了吧~那我们再来看下.box p:nth-of-type(2)吧~
.box p:nth-of-type(2)
.box p:nth-of-type(2)的效果是选择出了第二个p标签，也就是.box里的第三个子元素。
翻译下：
1.确定了选择的是.box元素里面的p元素。
2.选择的是.box的子元素里面àp元素à的父元素里面的à第二个p元素。
3.我们来分析下第二点到底是什么意思：”.box的子元素里面àp元素”指的是这两个元素：
4.“ p元素à的父元素”指的就是.box这个元素：
5.“ 的父元素里面的à第二个p元素”的意思就是：.box这个元素里面的p元素里的第二个，所以这里我们就不用管其他元素，只找p元素就可以了，因此选择出的结果是：
案例中的.box p:nth-child(2)和.box p:nth-of-type(2)区别就在于是第二个子元素还是第二个p元素
其实区别很简单：:nth-of-type为什么要叫:nth-of-type?因为它是以"type"来区分的。所以我们只需要找这个类型的元素，其他元素都可以视而不见。
深入理解nth-child和nth-of-type
:nth-child(n)选择器匹配父元素中的第n个子元素,元素类型没有限制,n可以是数字或公式
:nth-of-type(n)选择器匹配同类型中的第n个同级兄弟元素,n可以是数字或公式
我们发现这两个样式表现一致
我们发现这两者表现不一致,第一个标红的是p:nth-child(2),表示匹配父元素中的第2个子元素并且这个元素是p元素,第一个p元素正好符合所以标红,第二个标红的是p:nth-of-type(2),表示匹配同类型(p元素)中的第2个同级兄弟元素
p:nth-child(2)发现父元素下的第二个元素是span不是p元素不符合条件所以没有标红,p:nth-of-type(2)找到同类型p元素的第二个p元素存在,所以可以标红
.item:nth-child(2)寻找父元素下的第二个子元素并且class类名是item给它标红,.item:nth-of-type(2)寻找同类型元素(p元素)中的第2个同级兄弟元素给它标红
我们发现第一个、第二个、第三个都标红了,.item:nth-child(2)还是第二个标红,.item:nth-of-type(1)让第一个和第三个标红,解释跟上面一样同类型的第一个子元素
nth-child什么理解
:nth-child 不区分子元素的类型，而 :nth-of-type 则区分子元素的类型。
比如说pre t="code" l="html"style
div :nth-child(odd) {background:red}
div :nth-child(even) {background:blue}
/style
div
h1第1行/h1
p第2行/p
p第3行/p
h2第4行/h2
p第5行/p
h1第6行/h1
h2第7行/h2
/div结果是：第1行红色第2行蓝色第3行红色第4行蓝色第5行红色第6行蓝色第7行红色
如果改为pre t="code" l="html"style
div :nth-of-type(odd) {background:red}
div :nth-of-type(even) {background:blue}
/style
div
h1第1行/h1
p第2行/p
p第3行/p
h2第4行/h2
p第5行/p
h1第6行/h1
h2第7行/h2
/div则结果是：第1行红色第2行红色第3行蓝色第4行红色第5行红色第6行蓝色第7行蓝色
nth-child(n)用法
nth-child(n)用法：
在开发过程中，会碰到一些选择器的需求：例如使列表中的第一项或者最后一项显示不同的样式 、列表中的奇数或者偶数项显示不同的背景色 等等。可以通过 CSS 来实现这样的效果，CSS 给我们提供了几个样式参数：first-child、last-child、nth-child(n)。
含义
根据元素ID来选择元素，具有唯一性，这意味着同一id在同一文档页面中只能出现一次，例如，将一个元素的id取值为”navi”，那么在同一页面你就不能再将其他元素id取名为”navi”了。
尽管会发现即便你把几个元素都命名成相同的id名字，css选择器还是会把这些元素都选中应用样式（如class选择器那样），对于css选择器，id属性的唯一性似乎不存在。然而，对于js而言，它只会选择具有相同id名字元素中的第一个。出于一个好的编程习惯，同一个id不要在页面中出现第二次。