:last-child 选择器

指定属于其父元素的最后一个子元素的 p 元素的背景色:

 

<!DOCTYPE html>
<html>
<head>
<style> 
p:last-child
{
background:#ff0000;
}
</style>
</head>
<body>

<h1>这是标题</h1>
<p>第一个段落。</p>
<p>第二个段落。</p>
<p>第三个段落。</p>
<p>第四个段落。</p>
<p>第五个段落。</p>

</body>
</html>

### :last-child 选择器的含义 `:last-child` 是一种结构化伪类选择器,在 CSS 中用于选取某个父元素下的 **最后一个子元素**。它并不限定于特定类型的 HTML 元素,而是基于父子关系来定位目标元素[^1]。 当使用 `:last-child` 时,只有满足条件的元素才会被选中——即它是其直接父级容器内的最后一位子节点。需要注意的是,这个选择器不会考虑其他兄弟节点的具体名称或类别,只要求位置上的“最后一项”。 #### 使用方法实例解析 下面通过几个具体例子说明如何运用 `:last-child`: ```css /* 去除列表的最后一项底部边框 */ .item { border-bottom: 1px solid #ddd; } .item:last-child { border-bottom: none; } /* 这里利用了:last-child移除了项目列表里的最下方一项多余的分隔线*/ [^1] /* 设置不同颜色给无序列表的第一与最后成员 */ ul li:first-child { background-color: aqua; } ul li:last-child { background-color: pink; } /* 此处分别定义了首个以及末尾<li>的不同外观特性 */ [^2] ``` 对于更复杂的嵌套情况,则需注意书写顺序和逻辑关联度: ```html <div> <div>a</div> <div>b</div> <div>c</div> </div> <style> div:last-child{ color:red ; } </style> <!-- 上述代码片段中,“c”所在的<div>会被染成红色 --> ``` 另外还有涉及标签种类限制的情形: ```html <div> <p>P段落一。</p> <span>Span文字二。</span> <p>P段落三。</p> </div> <style> div p:last-child{/*仅针对<p>标签做处理*/} text-decoration:underline; } </style> <!-- 只有"P段落三."这一句会有下划线效果 --> ``` 以上展示了多种场景下 `:last-child` 的实际操作方式及其灵活性表现[^3][^4]。 ### 注意事项 尽管如此强大好用,但在某些特殊布局或者动态加载内容的情况下可能需要额外小心调整策略以免误伤正常显示需求;同时也要记得浏览器兼容性问题可能会带来意想不到的结果差异。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值