我们可以通过 CSS 来实现这样的效果,CSS 给我们提供了几个结构伪类选择器:first-child、last-child、nth-child(n)。 二、基本使用方法 1.常见使用方法 first-child:选择列表中的第一个标签。 举例:第一行字体显示为红色,代码如下: li:first-child{ color: red; } last-child:选择列表中的最后一个标签。 举...
在以上八个伪类选择器中,:first-child:last-child:nth-child(n):nth-last-child(n)在选择元素时,是按照其所有类型的兄弟元素开始计数,而:first-of-type:last-of-type:nth-of-type(n)nth-last-of-type(n),是按照其兄弟元素中,忽略除该元素以外的所有其他元素后开始计数的。 还没搞懂也没关系,你只需要记...
1.1 first、last和only伪类选择器 p:first-child { background:red; } 原理:首先p会筛选出页面所有的标签,:first-child再从这些标签中选中是其父元素的首个子元素的标签,应用{ background:red; }这个样式。对于上面的例子,则会给$1、$3和$8添加红色的背景色。 p:last-child { background:yellow; } 流程...
CSS中的伪类选择器和伪元素选择器都是用来选取DOM中特定元素的选择器。具体区别如下: 伪类的操作对象是文档树中已有的元素,而伪元素则创建了一个文档数外的元素。因此,伪类与伪元素的区别在于:有没有创建一个文档树之外的元素; 伪类本质上是为了弥补常规CSS选择器的不足,以便获取到更多信息; 伪元素本质上是创建了...
” :“:表示伪类,伪类选择器要写的符号。 last-child:定位ul标签中最后一个li元素 first-child:定位ul标签中第一个li元素 <!DOCTYPE html>伪类选择器<!--避免使用class id选择器-->/*选中ul的第一个子元素*/ul li:first-child{/*ul li:标签 first-child:第一个*/background:#02ff00;}/*选中ul的最...
介绍:nth-last-child 这篇文章的主要要素之一是:nth-last-child伪类。我们可以使用该选择器来模拟计算子元素。 来看看它是如何工作的。我将尽可能用直白的话来解释。 请看下图: 我们有一个五个卡片的列表。我们将用这个例子来证明我们可以用:nth-last-child做什么。
: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 是CSS3伪类,设置倒数第一个对象(最后一个)标签的CSS样式 :nth-last-child()也是css3伪类选择器,括号内填写具体数字(正整数)设置倒数第几个对象标签的CSS样式 :last-child与:nth-last-child()浏览器兼容性:
结构性伪类选择器—last-child 与“:first-child”选择器作用类似,不同的是“:last-child”选择器选择的是元素的最后一个子元素。 结构性伪类选择器—last-child 与“:first-child”选择器作用类似,不同的是“:last-child”选择器选择的是元素的最后一个子元素。
CSS伪类：last-child，实战使用 简介 css中的伪类为我们写样式代码时提供了很大的方便，直接用css的逻辑来完成，而不需要使用后台代码逻辑。比如当需要为一个div里的最后一个元素添加特别的样式时，如果不使用伪类，我们就要在程序代码里判断哪个元素才是div里的最后一个元素。下面我们来看一个实例。方法/步骤 1 先...