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

相关推荐
冬冬小圆帽2 分钟前
防止手机验证码被刷:React + TypeScript 与 Node.js + Express 的全面防御策略
前端·后端·react.js·typescript
Cmoigo18 分钟前
React Native自定义View(Android侧)
前端·react native
LanceJiang22 分钟前
文本溢出移入Tooltip提示,我的LeText组件
前端·vue.js
moreface24 分钟前
uni.request 配置流式接收+通义千问实现多轮对话
前端·vue.js·人工智能
大元9927 分钟前
前端必须知道的emoji知识
前端
不服就干30 分钟前
js通过游览器启动本地的绿色软件
前端·javascript
零零壹1130 分钟前
理解Akamai EdgeGrid认证在REST API中的应用
前端·后端
大元9930 分钟前
QuickMaster站点分析平台技术调研
前端
徐小夕33 分钟前
JSCAD:一款JavaScript驱动的开源3D设计神器
前端·javascript·github
sanly_shi43 分钟前
Interview preparation.md
前端·javascript·vue.js·网络协议