可以看到它的body里只写了两个div,第一个div设置了:first-child选择器后,成功让它向下和向右偏移了30px,但是使用:last-child选择器设置最后一个(因为这里只有两个div,所以也就是第二个)div的背景色的时候却没有效果,我也发现很奇怪,为啥没效果呢? 我开始想,难道是因为第一个元素选择器设置的背景色覆盖了:las...
我们可以通过 CSS 来实现这样的效果,CSS 给我们提供了几个结构伪类选择器:first-child、last-child、nth-child(n)。 二、基本使用方法 1.常见使用方法 first-child:选择列表中的第一个标签。 举例:第一行字体显示为红色,代码如下: li:first-child{ color: red; } last-child:选择列表中的最后一个标签。 举...
结构性伪类选择器—last-child 与“:first-child”选择器作用类似,不同的是“:last-child”选择器选择的是元素的最后一个子元素。 结构性伪类选择器—last-child 与“:first-child”选择器作用类似,不同的是“:last-child”选择器选择的是元素的最后一个子元素。 例如,需要改变的是列表中的最后一个“li”的背...
:first-child伪类 选定其父级第一个匹配的子元素。 例如: section:first-child{} 匹配其(section)父级中第一个元素为section的元素 语法: 1 2 元素:first-child{声明}/* 上面的是直接作用于元素,也可以用于css类。 */ 类名:first-child{声明} 下面看下具体的例子。 1 2 3 4 5 6 7 8 9 10 11 12...
div a:last-child{} /* 匹配第二个子元素,且为a标签 */ div a:nth-child(2){} /* 匹配倒数第二个子元素,且为a标签 */ div a:nth-last-child(2){} 二.通过结构伪类选择器,查找多个标签元素 html结构 导航1 导航2 导航3 导航4 导航5 ...
介绍一下常用的css3结构伪类选择器,nth-child、nth-last-child 、 nth-of-type、nth-last-of-type、 first-child 、last-child 、first-of-type 、last-of-type、only-child以及only-of-type。结构性伪类选择器的公共特征是允许开发者根据文档结构来指定元素的样式。接下来开始进入正题。
CSS伪类：last-child，实战使用 简介 css中的伪类为我们写样式代码时提供了很大的方便，直接用css的逻辑来完成，而不需要使用后台代码逻辑。比如当需要为一个div里的最后一个元素添加特别的样式时，如果不使用伪类，我们就要在程序代码里判断哪个元素才是div里的最后一个元素。下面我们来看一个实例。方法/步骤 1 先...
对CSS3新增的伪类选择器“:last-child”的功能描述正确的是()。A.向元素添加样式,并且该元素是其父元素的第n个子元素B.向元素添加样式,并且该元素是其父元素
“:last-child”选择器与“:first-child”选择器作用类似,不同的是“:last-child”选择器选择的是元素的最后一个子元素。例如,需要改变的是列表中的最后一个“li”的背景色,就可以使用这个选择器, ul>li:last-child{background:blue;} 示例演示 在博客的排版中,每个段落都有15px的margin-bottom,假设不想让博...
li:first-child{color:orange;} 3 : last-child匹配元素的最后一个子元素。 如下例,最后一个元素的文本会变为橙色。 HTML: 代码语言:javascript 复制 一些文本一些文本这里的文本是橙色的 CSS: 代码语言:javascript 复制 li:last-child{color:orange;}