公式: 使用公式 (an + b)。描述:表示周期的长度,n 是计数器(从 0 开始),b 是偏移值。 3、主要思路: 运用less混合传参,参数既是 :nth-child(n) 选择器的公式 在混合里面处理每个原色的底色,通过 :nth-child(n) 选择器结合 ::after 伪元素实现。 有了思路之后,下面让我们看一下具体的代码实现👇 4...
:nth-child是什么选择器()。A.序号子元素选择器B.首个子元素选择器C.通用兄弟元素选择器D.最后一个子元素选择器
:nth-child(2n-1),这个选择器是在":nth-child(2n)"基础上演变过来的,上面说了人是选择偶数,那么我们在他的基础上减去“1”就变成奇数选择,如: .demo li:nth-child(2n-1) {background: lime;} 我们来看看其实现过程 n=0 --》 2n-1=-1 --》 也没有选中任何元素, n=1 --》 2n-1=1 --》 ...
nth-child不仅仅只有一个,而是有一系列的这样的选择器,可以供我们在各种情况下使用. 代码语言:javascript 复制 :first-child:first-of-type:last-of-type:only-of-type:only-child:nth-child(n):nth-last-child(n):nth-of-type(n):nth-last-of-type(n):last-child 具体每个有什么差异,可以CSS 选择器参...
2-9.nth-child选择器 序列选择器之nth-child选择器: 1.序列选择器多用于列表,因为每个列表的列表项都是li元素 2.li:nth-child(n)表示的是选中li父元素中列表项第n个子元素是li的元素 3.li:nth-child(2n)表示的是选中li父元素中列表项偶数个子元素都是li的元素...
nth-child 选择器 nth-child作用 nth-child(n) 选择器匹配属于其父元素的第 n 个子元素。 注意: 1. 第n个子元素的计数是从1开始,不是从0开始的 2.选择表达式中的字母n代表≥0的整数 奇/偶数 用even/odd分别代表偶数 / 奇数:span:nth-child(even)...
:nth-child(n) 选择器选取属于其父元素的不限类型的第n个子元素的所有元素。 提示:请使用:nth-of-type()选择器来选取属于其父元素的特定类型的第n个子元素的所有元素。 语法 :nth-child(n|even|odd|formula) 参数描述 n要匹配的每个子元素的索引。
:nth-child(n) 选择器匹配父元素中的第 n 个子元素,元素类型没有限制。n 可以是一个数字,一个关键字,或者一个公式。提示: 请参阅选择器。该选择器匹配同类型中的第 n 个同级兄弟元素。 语法element:nth-child(n)element 是你想要选择的 HTML 元素。 n 是一个参数,可以是关键字(如 odd 或even),或者...
介绍一下常用的css3结构伪类选择器,nth-child、nth-last-child 、 nth-of-type、nth-last-of-type、 first-child 、last-child 、first-of-type 、last-of-type、only-child以及only-of-type。结构性伪类选择器的公共特征是允许开发者根据文档结构来指定元素的样式。接下来开始进入正题。
7、前后限制范围,选择第6个到第9个 li:nth-child(n+6):nth-child(-n+9) { background: #ff0000; border-bottom: 1px; } ... 8、范围高级用法:选中的子元素是从第2位到第9位,并且只包含奇数位。 li: nth-child(n+2):nth-child(odd):nth-child(-n+9) { back...