网站首页 > 知识剖析 正文
做前端一定要记住:nth-child(2)这个选择器,它可以帮你轻松选择你想要的标签并给与修改添加样式
下面通过几个例子说明,相信你一看就明白
li:nth-child(2){background:#090}
:nth-child(2)表示选取第几个标签,”2可以是你想要的数字”
li:nth-child(n+4){background:#090}
:nth-child(n+4)选取大于等于4标签,”n”表示从整数
li:nth-child(-n+4){background:#090}
:nth-child(-n+4)选取小于等于4标签
li:nth-child(2n){background:#090}
:nth-child(2n)选取偶数标签,2n也可以是even
li:nth-child(2n-1){background:#090}
:nth-child(2n-1)选取奇数标签,2n-1可以是odd
li:nth-child(3n+1){background:#090}
:nth-child(3n+1)自定义选取标签,3n+1表示”隔二取一”
li:last-child{background:#090}
:last-child选取最后一个标签
li:nth-last-child(3){background:#090}
:nth-last-child(3)选取倒数第几个标签,3表示选取第3个
猜你喜欢
- 2024-11-21 Chrome:2023年CSS增加了哪些功能?
- 2024-11-21 WEB基础面试题——HTML、CSS
- 2024-11-21 手风琴特效这么飒,你能用 JavaScript 实现吗?
- 2024-11-21 css篇四 文本样式(上)
- 2024-11-21 Python Web全栈之旅12--Web前端●CSS扩展知识点汇总,建议收藏
- 2024-11-21 自己动手打造工具系列之自动刷新简历
- 2024-11-21 web前端:CSS的常用属性速查表
- 2024-11-21 css操作之常用技巧
- 2024-11-21 《锋利的jQuery》观后记
- 2024-11-21 了解CSS Flex:解析实例、用法和案例研究
- 最近发表
- 标签列表
-
- xml (46)
- css animation (57)
- array_slice (60)
- htmlspecialchars (54)
- position: absolute (54)
- datediff函数 (47)
- array_pop (49)
- jsmap (52)
- toggleclass (43)
- console.time (63)
- .sql (41)
- ahref (40)
- js json.parse (59)
- html复选框 (60)
- css 透明 (44)
- css 颜色 (47)
- php replace (41)
- css nth-child (48)
- min-height (40)
- xml schema (44)
- css 最后一个元素 (46)
- location.origin (44)
- table border (49)
- html tr (40)
- video controls (49)