1、first-child first-child选择器用于选取属于其父元素的首个子元素的指定选择器。 选择li 列表中的 第一个li模块的背景颜色。li:first-child{background:#090} 2、last-child last-child表示选择列表中的最后一个标签,代码如下:li:last-child{background:#090} 3、nth-child(3) 表示选择第3个标签,代码如下...
结构伪类选择器: first-child父元素的首个子元素指定的选择器 last-child父元素最后一个子元素 nth-child父元素的第N个子元素 不论元素类型 nth-child(4) 选择第4个孩子 n代表的是第几个的意思 1. nth-last-child 选择器匹配属于其元素的第N个子元素的每个元素 目标伪类选择器: target :目标伪类选择器,选...
:first-child首个子元素 :last-child最后一个子元素 :nth-child(n)第n个子元素 nth-last-child(n)倒数第n个元素 :only-child唯一子元素时 :first-of-type首个特定类型子元素时 :last-of-type最后一个特定类型子元素时 :nth-of-type(n)第n个类型子元素 :nth-last-of-type(n)倒数第n个类型子元素 :o...
Less混合结合:nth-child()选择器的高级玩法 1、先看效果图 上图中比较麻烦的是每块的底色处理,下面看怎么处理👇 2、:nth-child(n) 选择器 匹配属于其父元素的第 N 个子元素,不论元素的类型。 n 可以是数字、关键词或公式。 数字:最常见的使用方式,eg: :nth-child(1) 关键词: Odd 和 even 是可用于...
Less混合结合:nth-child()选择器的高级玩法 1、先看效果图 上图中比较麻烦的是每块的底色处理,下面看怎么处理👇 2、:nth-child(n) 选择器 匹配属于其父元素的第 N 个子元素,不论元素的类型。 n 可以是数字、关键词或公式。 数字:最常见的使用方式,eg: :nth-child(1)...
运用less混合传参,参数既是 :nth-child(n) 选择器的公式 在混合里面处理每个原色的底色,通过 :nth-child(n) 选择器结合 ::after 伪元素实现。 有了思路之后,下面让我们看一下具体的代码实现 4、代码实现 以下只贴颜色处理的核心代码 .colorLine(@index, @startColor, @endColor) { .li-item:nth-chi...
在混合里面处理每个原色的底色,通过 :nth-child(n) 选择器结合 ::after 伪元素实现。 有了思路之后,下面让我们看一下具体的代码实现👇 4、代码实现 以下只贴颜色处理的核心代码👇 .colorLine(@index,@startColor,@endColor){.li-item:nth-child(@{index})::after{background:linear-gradient(136deg,@sta...
Less混合结合:nth-child()选择器的高级玩法 1、先看效果图 上图中比较麻烦的是每块的底色处理,下面看怎么处理👇 2、:nth-child(n) 选择器 匹配属于其父元素的第 N 个子元素,不论元素的类型。 n 可以是数字、关键词或公式。 数字:最常见的使用方式,eg: :nth-child(1)...
.parentDiv{color: black;.childDiv{&:first-child{color: red; }&:nth-child(2){color: green; }&:last-child{color: antiquewhite; }&::before,&::after{// ...}&--aa{// ...} } } less中使用&符号代表该类自身,后面可以是before、after等css中有的伪类等,也可以直接拼接类名 ...
:nth-child(n) { /* CSS 属性 */ } ``` 其中,n 可以是一个整数,也可以是一个表达式。下面是一些常见的用法: 1. 选择第 n 个子元素 ```css li:nth-child(3) { /* 选择第三个 li 元素 */ } ``` 2. 选择前 n 个子元素 ```css li:nth-child(-n+3) { /* 选择前三个 li 元素 *...