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开始的,
这里就列举了几种,可以自己尝试一些其他表达式

相关推荐
Moment5 分钟前
应届生必看:8家互联网公司前端校招面试题汇总
前端·javascript·面试
你若安好44910 分钟前
vue3 vite 多环境配置
前端·vue.js
Lazy_zheng11 分钟前
html2canvas + jsPDF,如何将DOM完美“复刻”到PDF?
前端·javascript
likewind202112 分钟前
xterm 使用记录--交互式shell打开方式不同,命令行重复
前端·vue.js
Cutey91614 分钟前
前端如何实现大文件分片上传
前端·javascript·vue.js
PBitW15 分钟前
阅读《Vue.js设计与实现》 -- 03
前端·vue.js·面试
Judy162315 分钟前
巧用 VSCode 与 AI 编码提升 Vue 前端开发效率
前端·javascript·ai 编程
清崖15 分钟前
MVVM 模式,和 MVC 模式区别
前端
OpenTiny社区15 分钟前
TinyEngine2.3版本发布:界面更美观、操作更便捷、路由能力再次升级
前端·低代码·开源
疯狂的魔鬼15 分钟前
Vue3 计算属性 computed 实现原理解析
前端·javascript