nth 元素选择
当我们要一组 class 同名，或者连续的一组元素的其中 一个 ，或者某种规律的元素 添加 单独样式的时候，不妨看看这类的元素选择器。
1. 官方定义
nth-child(n) 选择器匹配属于其父元素的第 N 个子元素； nth-last-child(n) 选择器匹配属于其元素的第 N 个子元素的每个元素，从最后 一个 子元素开始计数； nth-of-type(n) 选择器匹配属于父元素的 特定类型 的第 N 个子元素的每个元素。
2. 解释
nth-child(n) 、 nth-last-child(n) 、 nth-of-type(n) 都是用来匹配父元素内部子元素的。不过也有些区别：
nth-child 按照个数来算；
nth-of-type 按照类型来计算；
nth-last-child(n) 从最后 一个 子元素往前开始计算。
3. 语法
.item :nth-child(2n+1) {
}
.item :nth-of-type(n) {
}
.item :nth-last-child(2n) {
}
n 从 开始计数的正整数。
4. 兼容性
IE Edge Firefox Chrome Safari Opera ios android all all all all all all all all
5. 实例
选择 demo 内第 3 个子元素背景为红色。
使用 nth-child 。
.item {
width : px ;
height : px ;
text-align : center ;
line-height : px ;
border : px solid #ccc ;
background : #f2f2f2 ;
}
.item :nth-child(3) {
background : red ;
}
效果 图：
第三个背景变红 效果 图
<!DOCTYPE html>
< html lang = " en " >
< head >
< Meta charset = " UTF-8 " >
< Meta name = " viewport " content = " width=device-width, initial-scale=1.0 " >
< title > Document </ title >
< style >
.item {
width : px ;
height : px ;
text-align : center ;
line-height : px ;
border : px solid #ccc ;
background : #f2f2f2 ;
}
.item :nth-child(3) {
background : red ;
}
</ style >
</ head >
< body >
< div class = " demo " >
< div class = " item " > 1 </ div >
< div class = " item " > 2 </ div >
< div class = " item " > 3 </ div >
< div class = " item " > 4 </ div >
</ div >
</ body >
</ html >
使用 nth-last-child 。
.item {
width : px ;
height : px ;
text-align : center ;
line-height : px ;
border : px solid #ccc ;
background : #f2f2f2 ;
}
.item :nth-last-child(2) {
background : red ;
}
效果 图
第三个背景变红 效果 图
<!DOCTYPE html>
< html lang = " en " >
< head >
< Meta charset = " UTF-8 " >
< Meta name = " viewport " content = " width=device-width, initial-scale=1.0 " >
< title > Document </ title >
< style >
.item {
width : px ;
height : px ;
text-align : center ;
line-height : px ;
border : px solid #ccc ;
background : #f2f2f2 ;
}
.item :nth-last-child(2) {
background : red ;
}
</ style >
</ head >
< body >
< div class = " demo " >
< div class = " item " > 1 </ div >
< div class = " item " > 2 </ div >
< div class = " item " > 3 </ div >
< div class = " item " > 4 </ div >
</ div >
</ body >
</ html >
使用 nth-of-type 。
.item {
width : px ;
height : px ;
text-align : center ;
line-height : px ;
border : px solid #ccc ;
background : #f2f2f2 ;
}
.item :nth-of-type(3) {
background : red ;
}
效果 图
第三个背景变红 效果 图
<!DOCTYPE html>
< html lang = " en " >
< head >
< Meta charset = " UTF-8 " >
< Meta name = " viewport " content = " width=device-width, initial-scale=1.0 " >
< title > Document </ title >
< style >
.item {
width : px ;
height : px ;
text-align : center ;
line-height : px ;
border : px solid #ccc ;
background : #f2f2f2 ;
}
.item :nth-of-type(3) {
background : red ;
}
</ style >
</ head >
< body >
< div class = " demo " >
< div class = " item " > 1 </ div >
< div class = " item " > 2 </ div >
< div class = " item " > 3 </ div >
< div class = " item " > 4 </ div >
</ div >
</ body >
</ html >
6. 经验 分享
在实例中我们看到 nth-of-type 和 nth-child 同样都使用的是 （3）， 那么它们的不同是什么呢？下面这个例子我们一起看下：
< div class = " demo " >
< p class = " item " > 我是 p 标签 </ p >
< div class = " item " > 1 </ div >
< div class = " item " > 2 </ div >
< div class = " item " > 3 </ div >
< div class = " item " > 4 </ div >
</ div >
< div class = " demo " >
< p class = " item-2 " > 我是 p 标签 </ p >
< div class = " item-2 " > 1 </ div >
< div class = " item-2 " > 2 </ div >
< div class = " item-2 " > 3 </ div >
< div class = " item-2 " > 4 </ div >
</ div >
.demo {
float : left ;
}
.item , .item-2 {
width : px ;
height : px ;
text-align : center ;
line-height : px ;
border : px solid #ccc ;
background : #f2f2f2 ;
}
.item :nth-of-type(3) {
background : red ;
}
.item-2 :nth-child(3) {
background : red ;
}
效果 图
`nth-of-type` 和 `nth-child` 效果 图
通过 效果 图我们就清楚的明白他们的差异了。
简述实例展现 效果 ，通过实例分析他们两个的区别
<!DOCTYPE html>
< html lang = " en " >
< head >
< Meta charset = " UTF-8 " >
< Meta name = " viewport " content = " width=device-width, initial-scale=1.0 " >
< title > Document </ title >
< style >
.demo {
float : left ;
}
.item , .item-2 {
width : px ;
height : px ;
text-align : center ;
line-height : px ;
border : px solid #ccc ;
background : #f2f2f2 ;
}
.item :nth-of-type(3) {
background : red ;
}
.item-2 :nth-child(3) {
background : red ;
}
</ style >
</ head >
< body >
< div class = " demo " >
< p class = " item " > 我是 p 标签 </ p >
< div class = " item " > 1 </ div >
< div class = " item " > 2 </ div >
< div class = " item " > 3 </ div >
< div class = " item " > 4 </ div >
</ div >
< div class = " demo " >
< p class = " item-2 " > 我是 p 标签 </ p >
< div class = " item-2 " > 1 </ div >
< div class = " item-2 " > 2 </ div >
< div class = " item-2 " > 3 </ div >
< div class = " item-2 " > 4 </ div >
</ div >
</ body >
</ html >
下面是让所有偶数的背景变红。
.item {
width : px ;
height : px ;
text-align : center ;
line-height : px ;
border : px solid #ccc ;
background : #f2f2f2 ;
}
.item :nth-of-type(2n) {
background : red ;
}
效果 图：
偶数的背景变红 效果 图
<!DOCTYPE html>
< html lang = " en " >
< head >
< Meta charset = " UTF-8 " >
< Meta name = " viewport " content = " width=device-width, initial-scale=1.0 " >
< title > Document </ title >
< style >
.item {
width : px ;
height : px ;
text-align : center ;
line-height : px ;
border : px solid #ccc ;
background : #f2f2f2 ;
}
.item :nth-of-type(2n) {
background : red ;
}
</ style >
</ head >
< body >
< div class = " demo " >
< div class = " item " > 1 </ div >
< div class = " item " > 2 </ div >
< div class = " item " > 3 </ div >
< div class = " item " > 4 </ div >
</ div >
</ body >
</ html >
使用 nth-of-type(3n+1) 起作用，而 nth-of-type(1+3n) 不起作用，所以 n 一定要放在最前面。
calc 计算属性 ? ?before && after 位置声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did92606