学习网站推荐,做网站的前期准备,网络品牌推广策划,口碑好的网站建设服务:nth-of-type、:nth-child的区别 一、css选择器二、:nth-of-type、:nth-child的区别:nth-of-type(n)#xff1a;选择器匹配属于父元素的特定类型的第N个子元素:nth-child(n)#xff1a;选择器匹配属于其父元素的第 N 个子元素#xff0c;不论元素的类型:first-child#xf… :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等等相邻选择器h1p选择紧接在另一个元素后的元素兄弟选择器h1~pul后的所有p兄弟元素子选择器ul li后代选择器li a通配符选择器*属性选择器a[rel“external”]、a[target_blank等等]伪类选择器a:hover, li:nth-child等等
div idboxp1/pdiv我是div/divp2/pp3/pp4/pp5/pp6/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(n2)表示选中从第2个开始到最后nth-of-type(-n2)表示选择从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(n2)表示选中从第2个开始到最后nth-child(-n2)表示选择从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;}效果
