:nth-of-type(even)会选择Paragraph 2和Div 2,因为它们分别是第二个元素和第二个元素。 总结: 使用:nth-child(n)时,选择的元素取决于它在所有兄弟元素中的位置。 使用:nth-of-type(n)时,选择的元素取决于它在同类型兄弟元素中的位置。 选择哪一个取决于你的具体需求。如果你需要根据元素在父元素中的总体...
因为nth-of-type他是当前元素的兄弟元素的第n个,而nth-child是当前元素的兄弟节点的第n个当前元素,所以p:nth-of-type(4)是第四个p元素,只能是p元素的第四个,即 当前元素:nth-of-type无论中间加入什么元素,都只能是当前元素的第n个,而p:nth-child(4)是取第四个兄弟节点的p元素,所以我们发现第三个p被p...
1 nth-child：以数字1开头，按顺序查找标签，如果标签为div标签，则更改样式；nth-of-type：以数字1开头，按div标签查找标签。2 运行结果如图所示。3 在div标签之间插入p标签。4 运行结果如图所示。nth-child按顺序查找第4个标签，而第四个标签刚好为div标签，所以更改样式。nth-of-type按div标签查找第4个div标...
一、:nth-child 1.1 说明 :nth-child(n)选择器匹配属于其父元素的第 N 个子元素,不论元素的类型。n 可以是数字、关键词或公式。 注意:如果第 N 个子元素与选择的元素类型不同则样式无效! 1.2 示例 div>p:nth-child(2){ color:red; }我是第1个段落我是第2个段落<!--符合条件:1、是元素,2、父元...
:nth-child(n) 选择器匹配父元素中的第 n 个子元素,元素类型没有限制。 :nth-of-type(n)选择器匹配同类型中的第n个同级兄弟元素。 看概念,挺好理解,可是,每次实际使用的时候,就总是莫名其妙选不到想要的元素,于是我测试了各种例子,决定彻底搞清楚这两个概念。
因为nth-of-type他是当前元素的兄弟元素的第n个,而nth-child是当前元素的兄弟节点的第n个当前元素,所以p:nth-of-type(4)是第四个p元素,只能是p元素的第四个,即 当前元素:nth-of-type无论中间加入什么元素,都只能是当前元素的第n个,而p:nth-child(4)是取第四个兄弟节点的p元素,所以我们发现第三个p被...
一、nth-child 和 nth-of-type 选择第几个元素可以想到nth-child和nth-of-type。 这两个的区别是,nth-child代表的是第几个子元素,而nth-of-type代表的是该标签类型的第几个元素。 直接看例子吧 :nth-child(2){ color: red } 选中第2个元素
在实际开发中,nth-child通常用于实现排序、筛选等功能,其中元素的顺序非常重要;而nth-of-type则更常用于多样化展示格式,特别是在内容呈现时,经常需要对列表或表格中的特定项施加样式。比如在产品展示、信息组织等领域,能够使用这些选择器增强交互性与视觉吸引力。我们的展示不仅仅是为了吸引用户,更是通过精美的样式和结...
3)小结 个人意见,:nth-child是比较常用的,而且jq也是支持此选择器,对于结构不变的可以优先考虑此选择器,比如li:nth-child; 从上面例子来看,:nth-of-type更坚挺一些,但却据我所知,jq不支持:nth-of-type ,看来理解2者区别,具体情况具体分析才是王道。
关键区别在于它们的筛选范围。nth-of-type关注的是当前元素的直接兄弟元素，而nth-child则考虑的是当前元素的所有兄弟节点。这意味着在nth-of-type中，无论在目标元素与目标元素的直接兄弟之间插入什么元素，结果都是选择目标元素的第n个直接兄弟。而在nth-child中，结果取决于当前元素的所有兄弟节点的排列...