1.first-child 选择列表中的第一个标签 li:first-child{color:red} 2. last-child 选择列表中的最后一个标签 li:last-child{color:pink} 3.nth-child(n) 这里的n为数字,表示选择列表中的第n个标签 例如选择第三个标签 li:nth-child(3){color:pink} 4.nth-child(2n) 选择列表中的偶数,选中 2、4、6...
可以看到它的body里只写了两个div,第一个div设置了:first-child选择器后,成功让它向下和向右偏移了30px,但是使用:last-child选择器设置最后一个(因为这里只有两个div,所以也就是第二个)div的背景色的时候却没有效果,我也发现很奇怪,为啥没效果呢? 我开始想,难道是因为第一个元素选择器设置的背景色覆盖了:las...
nth-last-child(n)nth-last-child(n):选择倒数第 n 个元素。 举例:倒数第三元素字体设置为红色,代码如下: 代码语言:javascript 复制 li:nth-last-child(3){color:red;} 同样可以使用上面的方法进行拓展,方法如下: nth-last-child(n+n)nth-last-child(n+n):选择倒数第 n 个之前的元素。 举例:倒数第三...
定义和用法 :last-child 选择器用来匹配父元素中最后一个子元素。 提示:p:last-child 等同于 p:nth-last-child(1)。 浏览器支持 表格中的数字表示支持该属性的第一个浏览器版本号。 选择器 :last-child4.09.03.53.29.6 更多实例 实例 指定父元素 ul 中最后一个 li 元素,并设置背景颜色: ...
定义和用法 :last-child 选择器用来匹配父元素中最后一个子元素。 提示:p:last-child 等同于 p:nth-last-child(1)。 浏览器支持 表格中的数字表示支持该属性的第一个浏览器版本号。 选择器 :last-child4.09.03.53.29.6 更多实例 实例 指定父元素 ul 中最后一个 li 元素,并设置背景颜色: ...
一、CSS样式中&和:last-child作用 1、同级样式中,不同类名公用相同或不同样式简洁写法: & 符号作用,在嵌套层次中回溯一层,既实现效果: .icon-zfgs .icon-zfjd ... 2、:last-child作用:指定父元素中最后一个元素的样式,效果如图: 既简洁修改最后一个div的margin-right。 二、...
:last-child最后一个li被设置名目 ul,li{ list-style:none; margin:0; padding:0} ul li:last-child{color:#F00}/*设置最后一个li 设置装备摆设字体色彩为血色*/ 第一排 CSS5实例 第二排 第三排 第四排 第五排 最后一个li 第六排 ...
1、:last-child不设置装备摆设详细数,即完成倒数第一个标签(着末一个指定标签)的CSS花式 倒数第一(收尾一个li)配置不同CSS花式实例代码 <!DOCTYPEhtml>:last-child最后一个li被设置名目ul,li{list-style:none;margin:0;padding:0}ulli:last-child{color:#F00}/*设置最后一个li 设置装备摆设字体色彩为血色...
与“:first-child”选择器作用类似,不同的是“:last-child”选择器选择的是元素的最后一个子元素。 例如,需要改变的是列表中的最后一个“li”的背景色,就可以使用这个选择器, ul>li:last-child{background:blue;} 在博客的排版中,每个段落都有15px的margin-bottom,假设不想让博客“post”中最后一个段落不需...
1 代码应用实例。我们把最后一个子元素的颜色变了！p:last-child{ background:red; } 2 这个:last-child 代码的浏览器适应性非常好。3 一个完整的style 流程，第二个第二个段落。颜色就变成红色了！p:last-child{background:red;}这是标题第一个段落。第二个段落。 4 CSS3 :root 选择器，这个代码就是...