有时候first-child或者nth-child(1) 不起作用的原因,如下: 1 此时first-child不起作用,是因为.tap_con的父元素win的第一个子元素是.top,此时找到第一个子元素,但是其并不是.tab_con
- `:nth-child(1)`:选择第一个子元素。 - `:nth-child(2)`:选择第二个子元素。 - `:nth-child(odd)`:选择奇数位置的子元素。 - `:nth-child(even)`:选择偶数位置的子元素。 2.选择一定范围的子元素: - `:nth-child(n)`:选择所有子元素。 - `:nth-child(n+4)`:选择从第4个子元素开始的...
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的强大功能,它针对的是与类似的兄弟姐妹(而不...
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元素父元...
首先，选择器有几种基本形式，包括选择第一项、第N项和最后一项。使用:first-child可选取列表中的第一个元素，例如：first-child。通过:nth-child(n)可选取列表中的第n个元素，其中n是具体的数字。例如：nth-child(2)选取第二项。利用:last-child可选取列表的最后一个元素，例如：last-child。接...
1、first-child first-child表示选择列表中的第一个标签。代码如下: li:first-child{background:#090} 上面的意思是,li 列表中的 第一个li模块的背景颜色。 2、last-child last-child表示选择列表中的最后一个标签,代码如下:
选择前五个元素 li:nth-child(-n+5) { color: green; } 每四个一组,选择第一个 li:nth-child(4n-7) { /* 或者 4n+1 */ color: green; } 选择奇数或者偶数 奇数 li:nth-child(odd) { color: green; } 偶数 li:nth-child(even) { ...
在前端布局开发中，"nth-child(1)"选择器的应用往往被误解，它并非单纯寻找第一个具有特定类样式的元素，而是定位到该类样式的父元素的第一个子元素。这种选择器的逻辑可能会引起混淆，尤其是在理解其工作原理时。通常情况下，当类名为"someClass"的元素是其父元素的第一个子元素时，选择器的效果会...
1. `p`被同一个父元素包裹2. 该父元素的第一个元素就是`p`元素(2)同理，使用p:last-child生效要满足两个条件：1. `p`被同一个父元素包裹 2. 该父元素的最后一个元素就是`p`元素(3)p:nth-child(), p:nth-last-child()使用有以下几点注意：1. 括号内的序号都是从1开始的，0是无效的2. 与...