一、基础选择 1.选择第一个元素 2.选择最后一个元素 3.选择偶数元素 4.选择奇数元素 二、数学表达式选择 1.每隔3个选择一个 2.选择前3个元素 3.从第3个开始选择 4.选择3-6之间的元素 三、实用案例 1.表格隔行变色 2.列表最后三个元素特殊样式 3.首行缩进特殊处理 4.除了第一行的元素都加上上边框 一、基础选择 1.选择第一个元素 :nth-child(1
li:nth-child(-1n+8){background:orange;} 第五种:奇偶匹配 :nth-child(odd) 与 :nth-child(even) 分别匹配序号为奇数与偶数的元素。奇数(odd)与(2n+1)结果一样;偶数(even)与(2n+0)及(2n)结果一样。 衍生伪类 •E:nth-last-child(n): 选择某个子元素,从最后一个数起 •E:nth-of-type(n)...
first-child表示选择列表中的第一个标签。代码如下: li:first-child{background:#090} 上面的意思是,li 列表中的 第一个li模块的背景颜色。 2、last-child last-child表示选择列表中的最后一个标签,代码如下: li:last-child{background:#090} 3、nth-child(3) 表示选择列表中的第3个标签,代码如下: li:nth...
首先，选择器有几种基本形式，包括选择第一项、第N项和最后一项。使用:first-child可选取列表中的第一个元素，例如：first-child。通过:nth-child(n)可选取列表中的第n个元素，其中n是具体的数字。例如：nth-child(2)选取第二项。利用:last-child可选取列表的最后一个元素，例如：last-child。接下...
CSS选择器:nthchild的用法如下：基本用法：:nthchild：选取父元素的第N个子元素，不考虑子元素的类型。例如，:nthchild选取第一个子元素，:nthchild选取第二个子元素，以此类推。选择前几个子元素：:nthchild：选择父元素的前三个子元素。但更常见的是使用具体的数字来指定前几个。选择偶数或奇数子...
1、first-child first-child表示选择列表中的第一个标签。代码如下: li:first-child{background:#090} 上面的意思是,li 列表中的 第一个li模块的背景颜色。 2、last-child last-child表示选择列表中的最后一个标签,代码如下:
它们都是第一子（或第n子（1）），您应该在li上使用nth-child来正确选择。要更改链接的颜色，您应该...
:first-child 伪类来选择元素的第一个子元素 例子1 - 匹配第一个 元素 在下面的例子中,选择器匹配作为任何元素的第一个子元素的 p 元素: p:first-childsome text 例子2 - 匹配所有 元素中的第一个 元素 在下面的例子中,选择器匹配所有 元素中的第一个 元素: p>i:first-childtexttext 例子3 -...
“nthchild“选择器用于定位到某个父元素的第一个子元素，而不论这个子元素是否具有特定的类样式。具体解释如下：工作原理：“nthchild“选择器首先定位到指定的父元素。然后，它查找这个父元素下的第一个子元素。最后，它判断这个子元素是否是应用选择器时指定的目标元素。如果是，...
"nth-child(1)"选择器会首先找到指定元素的父级，然后查找该父级下的第一个子元素，最后判断这个子元素是否就是目标元素。如果符合，那么样式就会应用，否则则不会。当遇到某些问题时，比如first-child不起作用，可能是因为目标元素"tap_con"的父元素"win"的第一个子元素实际上是".top"，而非"tap_...