nth-child 公式的一般形式为:nth-child(an+b),其中a和b为整数。这个公式的意思是选择父元素的第n个子元素,其中n是从0开始计数的。 例如,nth-child(2)选择父元素的第二个子元素,nth-child(3)选择父元素的第三个子元素,以此类推。 在这个公式中,a和b可以是任意整数,它们决定了选择的具体位置。如果a为0,...
:nth-child(odd)选择其父元素中位置为奇数的子元素。 :nth-child(even)选择其父元素中位置为偶数的子元素。 :nth-child(n + x)选择其父元素中位置大于等于x的子元素。 例如,要选择父元素中的第三个子元素,可以使用如下方式: ``` .parent div:nth-child(3) { /* CSS样式*/ } ``` 拓展: 除了使用...
1. nth-child(n):父元素下的第n个子元素,n>0,索引从1开始。不区分子元素类型。 2. nth-child(odd):父元素下的奇数子元素,等同于:nth-child(2n-1)。区分子元素类型。 3. ntn-child(even):父元素下的偶数子元素,等同于:nth-child(2n)。区分子元素类型。 4. nth-child(an+b):父元素的an+b个子...
nth-child(2n)/nth-child(even): 双行样式 nth-child(2n+1)/nth-child(odd): 单行样式 .item li:nth-child(2n){background-color:red;}.item li:nth-child(2n+1){background-color:pink;} 实现前三个和后三个样式效果 实现前三个和后三个样式效果 nth-child(-n+3)匹配最前三个子元素 nth-last-...
二、nth-child 2.1选择容器下的第二个子元素 添加如下样式: 第二个子元素被选中: 2.2选择容器下的第六个子元素 添加如下样式(说明每一种情况下,除基础样式外只有该部分的样式): 第六个子元素被选中: 通过2.1和2.2知道nth-child选择元素时不区分元素的标签类型,统一排序选择对应序号的元素。
nth-child 是 CSS 选择器中的一个伪类,它可以选择某个父元素的第 N 个子元素,或者符合特定公式的子元素。 使用:nth-child 选择器的语法为: :nth-child(an + b)。 其中,a 和 b 都是整数,n 表示元素在其父元素中的位置,默认n是0。 nth-child()使用 ...
一、nth-child( ) 与 nth-of-type( )的定义与用法 nth-child(n) : 匹配父元素中的第 n 个子元素,元素类型没有限制。 nth-of-type(n) : 匹配同类型中的第n个同级兄弟元素。 n可以是一个数字,一个关键字,或者一个公式,比如:nth-child(odd) 奇数 ,nth-child(even) 偶数。
li:nth-child(4n-7) { /* or 4n+1 */ color: green; } 选择奇数或者偶数 li:nth-child(odd){ color: green; } li:nth-child(even){ color: green; } 当然这里也有另外两种实现,你懂的——神飞 选择最后一个元素 li:last-child { color: green; ...
运用less混合传参,参数既是 :nth-child(n) 选择器的公式 在混合里面处理每个原色的底色,通过 :nth-child(n) 选择器结合 ::after 伪元素实现。 有了思路之后,下面让我们看一下具体的代码实现👇 4、代码实现 以下只贴颜色处理的核心代码👇 代码语言:javascript ...
/*此时first-child不起作用,是因为.tap_con的父元素win的第一个子元素是.top,此时找到第一个子元素,但是其并不是.tab_con*/ .tab_con:first-child{ background:#090 !important; } .tab_con:nth-child(1){ background:#090 !important; } ...