有时候first-child或者nth-child(1) 不起作用的原因,如下: 1 此时first-child不起作用,是因为.tap_con的父元素win的第一个子元素是.top,此时找到第一个子元素,但是其并不是.tab_con
1、选择第几个元素 :nth-child(1)//选择第1个元素 2、选择奇数个元素 :nth-child(odd)或者:nth-child(2n-1) 3、选择偶数个元素 :nth-child(even)或者:nth-child(2n) 4、选择前10个元素 :nth-child(-n+10) 5、选择11-20个元素 :nth-child(-n+20):nth-child(n+11) 6、选择第20个元素之后的 ...
li:nth-child(5){ color: green; } 要选择第一个元素,你可以使用:first-child,或者我相信你也可以改下上面的例子来实现。 选择除了前面的五个之外的所有元素 如果有超过10个元素,它将会选中超过5个。 只选择前面的5个 li:nth-child(-n+5){ color: green; } 从开始的那个,选择每第四个 li:nth-child...
:nth-of-type选择器非常类似于:nth-child但有一个关键区别:它更具体。在上面的例子中,它们会产生相同的结果,因为我们只遍历li元素,但是如果我们遍历更复杂的兄弟姐妹组,:nth-child会尝试匹配所有的兄弟姐妹,而不仅仅是相同元素类型的兄弟姐妹。这就说明了:nth-of-type的强大功能,它针对的是与类似的兄弟姐妹(而不...
first-child表示选择列表中的第一个标签。代码如下: li:first-child{background:#090} 上面的意思是,li 列表中的 第一个li模块的背景颜色。 2、last-child last-child表示选择列表中的最后一个标签,代码如下: li:last-child{background:#090} 3、nth-child(3) ...
nth-child是选择父元素下的子元素,下标从1开始 p:nth-child(3n + 0)表示选择p元素父元素下的第3,6,9...个子元素,如果要选中第一个元素,要写成:nth-child(1),同理:nth-child(3n + 1)就代表选中第1,4,7...个子元素。 这里需要注意的是p元素父元素的第一个子元素为h1标签,所以要想选中p元素父元...
很多人对 css中的伪类器 nth-child 理解不是很到位 下面介绍它们的使用方法: 举例1: 例中 li:nth-child(1) 为 li 同级下的第一个子元素(换句话说也就是 ul 下的第一个子元素) 举例2: 例中 li:nth-child(2) 为 li 同级下的第二个子元素(换句话说
- `:nth-child(1)`:选择第一个子元素。 - `:nth-child(2)`:选择第二个子元素。 - `:nth-child(odd)`:选择奇数位置的子元素。 - `:nth-child(even)`:选择偶数位置的子元素。 2.选择一定范围的子元素: - `:nth-child(n)`:选择所有子元素。 - `:nth-child(n+4)`:选择从第4个子元素开始的...
首先，选择器有几种基本形式，包括选择第一项、第N项和最后一项。使用:first-child可选取列表中的第一个元素，例如：first-child。通过:nth-child(n)可选取列表中的第n个元素，其中n是具体的数字。例如：nth-child(2)选取第二项。利用:last-child可选取列表的最后一个元素，例如：last-child。接...
nth-last-child(3n+1)nth-last-child(3n+1):选择第 1、4、7 个元素,从第一个开始每个递增三个。 举例:第1、4、7 . . . 行背景色设置为红色,代码如下: 代码语言:javascript 复制 li:nth-child(3n+1){background:red;} 上面的几种方法运行效果如下图: ...