ul列表第一个li和最后一个li的如何选中

本文深入讲解了CSS中各种选择器的使用方法,包括:first-child、:last-child、:nth-child(n)、:nth-last-child(n)、:nth-last-of-type(n)、:nth-of-type(n)、:even和:odd等,解析了它们如何帮助开发者更精确地控制网页元素的样式。

开发板推荐:天空星STM32F407VET6开发板

超高性价比 STM32主控 | 超高主频 | 一板兼容百芯 | 比赛神器 | 沉金彩色丝印

第一个li的样式:li:first-child { background:#f00; }
最后一个li的样式:li:last-child { background:#000; }
第n个li的样式:li:nth-child(n) { background:#000; }
倒数第二个li的样式:nth-last-of-type(2){ background:#000; }
奇数列表:li:nth-child(odd) { background:#f00; }
偶数列表:li:nth-child(even) { background:#f00; }

nth-last-child(n)说明 (个人比较常用 哈哈哈)
匹配父元素的倒数第n个子元素E,假设该子元素不是E,则选择符无效。
要使该属性生效,E元素必须是某个元素的子元素,E的父元素最高是body,即E可以是body的子元素
该选择符允许使用一个乘法因子(n)来作为换算方式,比如我们想选中倒数第一个子元素E,那么选择符可以写成:nth-last-child(1)

开发板推荐:天空星STM32F407VET6开发板

超高性价比 STM32主控 | 超高主频 | 一板兼容百芯 | 比赛神器 | 沉金彩色丝印

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值