CSS中的:last-child选择器是一种用于选择某个元素的最后一个子元素的样式规则。在JavaScript中,我们可以使用该选择器来获取最后一个子元素的引用或应用特定的操作。 :last-child选择器的语法是在目标元素的父元素上使用该选择器,例如: 代码语言:css 复制 .parent-element :last-child{/* 样式规则 */} 这将选择...
li:nth-last-child(n+3){font-weight:bold;} 上面的几种方法运行效果如下图: nth-last-child(3n)nth-last-child(3n):选择第 3、6、. . . 个元素,选择三的倍数。 举例:第3、6、 . . . 三的倍数行背景色设置为橙色,代码如下: 代码语言:javascript 复制 li:nth-child(3n){background:orange;} nth...
②nth-last-child(-n+n):选择倒数第 n 个及之前(从下往上,倒着数)的元素。 举例:倒数第三个及之后的元素字体设置为粗体,代码如下: li:nth-last-child(-n+3){ font-weight: bold; } 6.nth-child(3n)、nth-child(3n+1) nth-child(3n):选择第 3、6、. . . 个元素,选择三的倍数。 举例:第3...
:last-child伪类选择器用于选择其父元素的最后一个子元素。你可以将这个伪类选择器与父元素的选择器结合使用,以精确选择你想要的元素。 4. 构建CSS选择器字符串 根据父元素和子元素类型,构建CSS选择器字符串。例如,如果你的父元素是一个类名为container的<div>元素,并且你想要选择这个容器中的最后一个<...
:last-child 选择器用来匹配父元素中最后一个子元素。 提示:p:last-child 等同于 p:nth-last-child(1)。 浏览器支持 表格中的数字表示支持该属性的第一个浏览器版本号。 选择器 :last-child4.09.03.53.29.6 更多实例 实例 指定父元素 ul 中最后一个 li 元素,并设置背景颜色: ...
结构性伪类选择器—last-child “:last-child”选择器与“:first-child”选择器作用类似,不同的是“:last-child”选择器选择的是元素的最后一个子元素。例如,需要改变的是列表中的最后一个“li”的背景色,就可以使用这个选择器, ul>li:last-child{background:blue;} ...
“:last-child”选择器与“:first-child”选择器作用类似,不同的是“:last-child”选择器选择的是元素的最后一个子元素。例如,需要改变的是列表中的最后一个“li”的背景色,就可以使用这个选择器,ul>li:last-child{background:blue;}示例演示在博客的排版中,每个段落都有15px的margin-bottom,假设不想让博客“...
:last-child代表在它父元素中的最后一个子元素。 正例 代码 <!-- CSS --> .list { width: 300px; padding-left: 30px; } .list .item { background-color: #eee; padding: 6px 12px; } .list item:last-child { /* 关键代码:在.item类选择器上应用:last-child伪类 */ background...
” :“:表示伪类,伪类选择器要写的符号。 last-child:定位ul标签中最后一个li元素 first-child:定位ul标签中第一个li元素 <!DOCTYPE html>伪类选择器<!--避免使用class id选择器-->/*选中ul的第一个子元素*/ul li:first-child{/*ul li:标签 first-child:第一个*/background:#02ff00;}/*选中ul的最...
事实上这个结果是对的,我们仔细阅读说明会发现,这类选择器选中的是元素在父元素中的计数,因为div元素的位置都是偶数,所以出现如下运行结果。如果我们只想选中div2和div4应该如何做呢?first-of-type、last-of-type、nth-of-type 和 nth-last-of-type系列选择器可以帮助我们实现这个愿望。 image.png CSS选择器-...