CSS——17. nth-child选择器2

html 复制代码
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>nth-child选择器</title>
		<style type="text/css">
			/*选择的是li的父元素中的前6个li子元素(n=0时选中的是我爱学习6,n=1时选中的是我爱学习5,等等...)*/
			/*li:nth-child(-n+6){color: red;}*/
			
			/*选择的是li的父元素中的从第4个li子元素开始的所有li子元素*/
			/*li:nth-child(n+4){color: red;}*/
			
			/*选择的是li的父元素中的,从第3个开始,第10个结束的li子元素*/
			/*li:nth-child(n+3):nth-child(-n+10){color: red;}*/
			
			/*选择的是li的父元素中的,从1,4,7....li子元素*/
			li:nth-child(3n+1){color: red;}
		</style>
	</head>
	<body>
		
		
		<ul>
			<li>我爱学习1</li>
			<li>我爱学习2</li>
			<li>我爱学习3</li>
			<li>我爱学习4</li>
			<li>我爱学习5</li>
			<li>我爱学习6</li>
			<li>我爱学习7</li>
			<li>我爱学习8</li>
			<li>我爱学习9</li>
			<li>我爱学习10</li>
			
		</ul>
		
		
	</body>
</html>

n是从0开始的,
这里就列举了几种,可以自己尝试一些其他表达式

相关推荐
java1234_小锋10 小时前
【技术专题】HTML5 网页技术 - HTML5 语义化标签
前端·html·html5
涛涛ing10 小时前
2026年,你的JavaScript计数逻辑可以删了:CSS刚刚学会了自己数数
前端
广州华水科技10 小时前
单北斗GNSS变形监测系统在水库安全监测中的应用与优势
前端
PBitW10 小时前
行内编辑,如何防止后端未返回,直接全部更新了?
前端·面试
wjjzhbb10 小时前
前端监控:给用户体验装上仪表盘
前端·ux
江湖有缘10 小时前
Docker实战 | Docker部署Minimalist-web-notepad个人笔记本
前端·docker·notepad++
Hilaku11 小时前
为什么我在团队里禁止使用 axios?
前端·javascript·程序员
兮动人11 小时前
Chrome 152 升级后本地请求全挂了?是 LNA 策略在搞事
前端·chrome·lna·local network
JarvanMo11 小时前
让 3D 在 Flutter 中焕发生机:Flutter GPU 与 flutter_scene 实战经验
前端
狂师12 小时前
太强了!GitHub上开源了一款AI自动化测试框架,0代码搞定前后端测试!
前端·后端·测试