/* 选择父元素中的最后一个特定类型的子元素 */
.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在线
Laravel PHP 深圳智简公司。版权所有©2023-2043 LaravelPHP 粤ICP备2021048745号-3
Laravel 中文站