Laravel  
laravel
文档
数据库
架构
入门
php技术
    
Laravelphp
laravel / php / java / vue / mysql / linux / python / javascript / html / css / c++ / c#

css最后一个元素

作者:傲世,小狂徒   发布日期:2025-04-05   浏览:77

/* 选择父元素中的最后一个特定类型的子元素 */
.last-child-example div:last-child {
  background-color: yellow;
}

/* 选择父元素中最后一个特定类的元素 */
.last-of-type-example .item:last-of-type {
  color: red;
}

/* 示例HTML结构 */
/*
<div class="last-child-example">
  <div>第一个div</div>
  <div>第二个div</div>
  <div>第三个div</div> <!-- 这个会被选中 -->
</div>

<div class="last-of-type-example">
  <div class="item">第一个item</div>
  <div class="item">第二个item</div>
  <div class="item">第三个item</div> <!-- 这个会被选中 -->
  <div>这个不会被选中,因为它不是.item类</div>
</div>
*/

解释说明:

  • :last-child 伪类选择器用于选择作为其父元素的最后一个子元素的元素。
  • :last-of-type 伪类选择器用于选择作为其父元素的最后一个特定类型的子元素。例如,选择最后一个 <div> 元素或最后一个带有 .item 类的元素。

上一篇:css样式穿透

下一篇:scss转css在线

大家都在看

css 红色

css文字超长省略号

css 渐变字体

css背景图片等比例缩放

css文字删除线

css 自定义滚动条

css flex gap

css上一个兄弟元素怎么找到

css文字超出隐藏变省略号鼠标上去展示完整

css文字不允许换行

Laravel PHP 深圳智简公司。版权所有©2023-2043 LaravelPHP 粤ICP备2021048745号-3

Laravel 中文站