- `:nth-child(1)`:选择第一个子元素。 - `:nth-child(2)`:选择第二个子元素。 - `:nth-child(odd)`:选择奇数位置的子元素。 - `:nth-child(even)`:选择偶数位置的子元素。 2.选择一定范围的子元素: - `:nth-child(n)`:选择所有子元素。 - `:nth-child(n+4)`:选择从第4个子元素开始的...
:nth-child规定属于其父元素的第二个子元素的每个 p 的背景色: p:nth-child(2){ background:#ff0000; } 只选择第五个元素 li:nth-child(5){ color: green; } 要选择第一个元素,你可以使用:first-child,或者我相信你也可以改下上面的例子来实现。 选择除了前面的五个之外的所有元素 如果有超过10个元素...
li:nth-last-child(2){color:green;} 选择第9个因为我们这里有10个元素,但是如果有30个元素则会选择第29个元素。 动手试试? 来在线尝试 nth-of-type :nth-of-type允许根据公式根据源顺序选择一个或多个元素。在CSS选择器第3级规范中,它被定义为“结构伪类”,这意味着它用于根据与父元素和兄弟元素的关系对...
首先，选择器有几种基本形式，包括选择第一项、第N项和最后一项。使用:first-child可选取列表中的第一个元素，例如：first-child。通过:nth-child(n)可选取列表中的第n个元素，其中n是具体的数字。例如：nth-child(2)选取第二项。利用:last-child可选取列表的最后一个元素，例如：last-child。接下...
CSS选取第几个标签元素:nth-child、first-child、last-child 1、first-child first-child表示选择列表中的第一个标签。代码如下: li:first-child{background:#090} 上面的意思是,li 列表中的 第一个li模块的背景颜色。 2、last-child last-child表示选择列表中的最后一个标签,代码如下: ...
1、first-child first-child表示选择列表中的第一个标签。代码如下: li:first-child{background:#090} 上面的意思是,li 列表中的 第一个li模块的背景颜色。 2、last-child last-child表示选择列表中的最后一个标签,代码如下:
(一)结构性伪类选择器——first-child “:first-child”选择器表示的是选择父元素的第一个子元素的元素E。简单点理解就是选择元素中的第一个子元素,记住是子元素(个人理解:父元素下的第一代子元素),而不是后代元素。 (二)结构性伪类选择器——last-child ...
li:nth-child(3n){background:orange;} nth-last-child(3n+1)nth-last-child(3n+1):选择第 1、4、7 个元素,从第一个开始每个递增三个。 举例:第1、4、7 . . . 行背景色设置为红色,代码如下: 代码语言:javascript 复制 li:nth-child(3n+1){background:red;} ...
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元素父元...
在平时布局开发过程中,经常使用nth-child这个子元素选择器,比如下面 1 .someClas:nth-child(1) 1 这里并不是找第一个类样式为someClass的元素,而是找这个类样式父元素的第一个子元素 说起来有点绕 但是这里很容易理解错误, 在大部分时候,这个类someClass的父元素的第一个元素便是这个类本身,但是有时候也有例外...