:nth-of-type(even)会选择Paragraph 2和Div 2,因为它们分别是第二个元素和第二个元素。 总结: 使用:nth-child(n)时,选择的元素取决于它在所有兄弟元素中的位置。 使用:nth-of-type(n)时,选择的元素取决于它在同类型兄弟元素中的位置。 选择哪一个取决于你的具体需求。如果你需要根据元素在父元素中的总体...
p:nth-of-type(2) {/* 设置样式 */background-color: green; } 2.选择所有奇数位置的 元素时,使用关键词 odd: p:nth-of-type(odd) {/* 设置样式 */background-color: green; } 3.选择每个循环(循环周期为 a)中第 b 个元素时,则使用公式 an+b: /* 选择位置为 3 的倍数的所有 元素 */p...
nth-of-type选择器主要用于选取特定类型的子元素，且该子元素在同级同类元素中的位置符合指定的规律。例...
因为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...
:nth-child(2)以选择数字优先,它先找到了父类 .demo ,然后再查找父类.demo的第二个子元素,先判断这个子元素是否为li,如果是则选择,非则选择失败。 .demo li:nth-of-type(2)的选择过程分析: :nth-of-type(2)以选择类型优先,它先找到了父类 .demo ,然后从 .demo 中选择li元素的第2个 ...
目录 一:属性选择器: 二:结构伪类选择器: ①偶数ul li:nth-child(even) , 奇数ul li:nth-child(odd) ,特定ul li:nth-child(n) ②nth-child和nth-of-type的区别 三:关于权重 四:伪元素 div::before{};div::after{}里面必须有cont...
一、nth-child 和 nth-of-type 选择第几个元素可以想到nth-child和nth-of-type。 这两个的区别是,nth-child代表的是第几个子元素,而nth-of-type代表的是该标签类型的第几个元素。 直接看例子吧 :nth-child(2){color:red} 选中第2个元素 image.png ...
一、:nth-child 1.1 说明 :nth-child(n)选择器匹配属于其父元素的第N个子元素,不论元素的类型。n可以是数字、关键词或公式。 注意:如果第N个子元素与选择的元素类型不同则样式无效! 1.2 示例 div>p:nth-child(2){ color:red; } 我是第1个段落 ...
其实区别很简单::nth-of-type为什么要叫:nth-of-type?因为它是以"type"来区分的。也就是说:ele:nth-of-type(n)是指父元素下第n个ele元素, 而ele:nth-child(n)是指父元素下第n个元素且这个元素为ele,若不是,则选择失败。 文字未免听起来比较晦涩,便于理解,这里附上一个小例子: ...
1、:nth-child()选择器:nth-child(n)选择器匹配属于其父元素的第 N 个子元素,不论元素的类型,n可以是数字、关键词或公式。 2、:nth-of-type(n...) :nth-of-type(odd) -上述例子p:nth-of-type(odd):选择的是P的父级元素下的,奇数的P元素,所以是 第一个段落。 和 < 序选择器 在...