:nth-of-type :nth-child 说明:.type:nth-child(1)匹配的是type的父元素的子元素中第一个子元素且class是type的h1元素,.type:nth-of-type(1)匹配的是type的父元素的子元素中h1和p元素的第一个class是type的元素,即0和1。 总结: classA:nth-of-type(n) 匹配的是父元素的子元素中,每种类型的元素节点...
:nth-of-type(even)会选择Paragraph 2和Div 2,因为它们分别是第二个元素和第二个元素。 总结: 使用:nth-child(n)时,选择的元素取决于它在所有兄弟元素中的位置。 使用:nth-of-type(n)时,选择的元素取决于它在同类型兄弟元素中的位置。 选择哪一个取决于你的具体需求。如果你需要根据元素在父元素中的总体...
在“:nth-of-type(n)”选择器中的“n”和“:nth-child(n)”选择器中的“n”参数也一样,可以是具体的整数,也可以是表达式,还可以是关键词。 通过“:nth-of-type(2n)”选择器,将容器“div.wrapper”中偶数段数的背景设置为橙色。 HTML代码: 我是一个Div元素 我是一个段落元素 我是一个Div元素 我是...
nth-of-type选择器主要用于选取特定类型的子元素，且该子元素在同级同类元素中的位置符合指定的规律。例...
6 tbody tr:nth-of-type(2n){ background-color: red;}tbody tr:nth-of-type(2n+1){background-color: green;} 你也这样来做，选择 5-10 的子元素。table tr:nth-child(n+5):nth-child(-n+10) { background-color: red;} ...
其实.line:nth-of-type(2n+1) 是按照元素类型做个集合, 然后再根据不同的集合取符合奇数规则的显示。 这就解释了为何 p 和 div 都有显示。 而非揉在一起间隔显示。 tips: 注意 nth-of-type 的描述,相同兄弟节点的元素 .hello:nth-of-type(2n+1) ...
而如果我们的目标是给每个第二个li,多类型元素的li选定背景色,使用nth-of-type选取方式如下: ulli:nth-of-type(2n){ background-color:#f0f0f0; } 综上所述,选择器的选择可以使用数字和函数,例如odd、even、n、n+1等等,形成规律性的样式。通过不断的尝试与运用,它们能够为我们的网页布局提供更为灵活丰富的...
nth-of-type是一个获取一些适用项并应用样式的属性,它是从CSS 3添加的CSS选择器之一,:nth-of-type(n) 选择器匹配属于父元素的特定类型的第 N 个子元素的每个元素。 如何使用nth-of-type? 我们先来看看nth-of-type的具体描述,注意“:”(冒号)在“nth - of - type(2n)”之前附加。
区别:两种匹配的元素不同,“:nth-of-type(n)”选择器是匹配属于父元素的特定类型的第N个子元素,元素类型是有限制的;而“:nth-child(n)”选择器是匹配属于其父元素的第N个子元素,元素类型是没有限制的。 1、:nth-child() 选择器 :nth-child(n) 选择器匹配属于其父元素的第 N 个子元素,不论元素的类型...
CSS3 nth-of-type(n)选择器 “:nth-of-type(n)”选择器和“:nth-child(n)”选择器非常类似,不同的是它只计算父元素中指定的某种类型的子元素。当某个元素中的子元素不单单是同一种类型的子元素时,使用“:nth-of-type(n)”选择器来定位于父元素中某种类型的子元素是非常方便和有用的。在“:nth-of-...