:nth-of-type、:nth-child的区别
- 一、css选择器
- 二、:nth-of-type、:nth-child的区别
- :nth-of-type(n):选择器匹配属于父元素的特定类型的第N个子元素
- :nth-child(n):选择器匹配属于其父元素的第 N 个子元素,不论元素的类型
- :first-child:获取元素的第 1 个子元素
- :last-child:获取元素的最后一个个子元素
- 效果
一、css选择器
选择器 | 用法 |
---|---|
选择器 | 用法 |
ID选择器 | #myid |
类选择器 | .myclassname |
标签选择器 | div,h1,p等等 |
相邻选择器 | h1+p(选择紧接在另一个元素后的元素) |
兄弟选择器 | h1~p(ul后的所有p兄弟元素) |
子选择器 | ul > li |
后代选择器 | li a |
通配符选择器 | * |
属性选择器 | a[rel=“external”]、a[target="_blank"等等] |
伪类选择器 | a:hover, li:nth-child等等 |
<div id="box"><p>1</p><div>我是div</div><p>2</p><p>3</p><p>4</p><p>5</p><p>6</p>
</div>
二、:nth-of-type、:nth-child的区别
:nth-of-type(n):选择器匹配属于父元素的特定类型的第N个子元素
所有兄弟节点中找到第三个p标签背景为红色。所以,3背景为红。
- nth-of-type(2n)表示选中偶数标签
- nth-of-type(2n-1)表示选中奇数标签
- nth-of-type(n+2)表示选中从第2个开始到最后
- nth-of-type(-n+2)表示选择从0到2的标签,即小于3的标签。
#box p:nth-of-type(3) {background: red;
}
:nth-child(n):选择器匹配属于其父元素的第 N 个子元素,不论元素的类型
找父元素的第三个子元素,如果该子元素为p,则其变为黄色,如果,第三个子元素不是p元素,则没有子元素的背景变为黄色。
- nth-child(2n)表示选中偶数标签
- nth-child(2n-1)表示选中奇数标签
- nth-child(n+2)表示选中从第2个开始到最后
- nth-child(-n+2)表示选择从0到2的标签,即小于3的标签。
- nth-last-child(2)表示选中倒数第2个标签
#box p:nth-child(3) {background: yellow;
}
:first-child:获取元素的第 1 个子元素
#box p:first-child {background: pink;}
:last-child:获取元素的最后一个个子元素
#box p:last-child {background: green;}