:nth-of-type(even)会选择Paragraph 2和Div 2,因为它们分别是第二个元素和第二个元素。 总结: 使用:nth-child(n)时,选择的元素取决于它在所有兄弟元素中的位置。 使用:nth-of-type(n)时,选择的元素取决于它在同类型兄弟元素中的位置。 选择哪一个取决于你的具体需求。如果你需要根据元素在父元素中的总体...
今天对这两个选择器好好地过了遍之后,个人觉得:nth-of-type更彪悍些,不容易出问题,尽管:nth-child貌似更常见些。所以以后要选择某某元素下的第几个什么标签,建议使用:nth-of-type,因为页面元素插入其他标签啊什么的是比较常见的,如果使用:nth-child,选择器可能就是嗝屁。 不过嘛,世事无绝对,最靠谱的就是对这...
p:nth-child(2) { color: red; } p:nth-of-type(2) { color: red; } 这时候两个选择器所渲染的结果就不一样了。 p:nth-child(2)悲剧了,其渲染的结果不是第二个p标签文字变红,而是第一个p标签,也就是父标签的第二个子元素。如下效果截图: 您可以狠狠地点击这里::nth-child测试demo2 p:nth-of...
nth-child(n) : 匹配父元素中的第 n 个子元素,元素类型没有限制。 nth-of-type(n) : 匹配同类型中的第n个同级兄弟元素。 n可以是一个数字,一个关键字,或者一个公式,比如:nth-child(odd) 奇数 ,nth-child(even) 偶数。 nth-child和nth-of-type的不同之处就是查找元素的方式不同。前者是查找兄弟元素...
简介:css中:nth-child()和nth-of-type有何区别详解 div p:nth-child(n) :找到div元素下面的第n个子元素 并且此元素类型为p 如果类型不是p则无效 div p:nth-of-type(n) :找到div元素下面的第n个p元素 (无论第一个p元素之前有多少个兄弟元素 此选择器只会从第一个p元素开始查找 应用场景:在一个大父...
一、nth-child 和 nth-of-type 选择第几个元素可以想到nth-child和nth-of-type。 这两个的区别是,nth-child代表的是第几个子元素,而nth-of-type代表的是该标签类型的第几个元素。 直接看例子吧 :nth-child(2){ color: red } 选中第2个元素 image.png 然后是nth-of-type :nth-of-type(2){ color:...
nth-child和nth-of-type是css的两个伪选择符。应用中,这两者常常容易混淆。这里把它们拿出来仔细做个对比,看看这两者是怎么查找元素的。 nth-child(n) —— 寻找第n个子元素 nth-of-type(n) —— 寻找同一类型元素里的第n个元素 看这个定义也许还不是很清楚他们的区别,我们一点点来区分。
elem:nth-child(n)选中父元素下的第n个子元素,n可以接受具体的数 值,也可以接受函数。 elem:nth-last-child(n)作用同上,不过是从后开始查找。 elem:last-child选中最后一个子元素。 elem:only-child如果elem是父元素下唯一的子元素,则选中之。 elem:nth-of-type(n)选择器匹配属于父元素的 特定类型(必须为...
其实区别很简单::nth-of-type为什么要叫:nth-of-type?因为它是以"type"来区分的。也就是说:ele:nth-of-type(n)是指父元素下第n个ele元素, 而ele:nth-child(n)是指父元素下第n个元素且这个元素为ele,若不是,则选择失败。 这里附上一个小例子: 复制代码代码如下: <ul clas点赞(0...
nth-child 和 nth-of-type是CSS的两个伪选择器。要对相同位置或相似做操作的时候非常有用。前者的字面意思是选择第几个子元素,后者的字面意思是选择某类型的第几个元素。 首先来看他们的完整格式。 selector:nth-child(an+b) /* 如 tr:nth-child(3), p:nth-child(2n+1) */ ...