CSS——16. nth—child序列选择器1

html 复制代码
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>nth-child选择器</title>
		
	
		
		<style type="text/css">
			/* 选择的是li的父元素(ul)中的第9个li子元素 */
			li:nth-child(9){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开始的

html 复制代码
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>nth-child选择器</title>
		


		<style type="text/css">			
			/*选择的是li的父元素中的奇数个li子元素*/
			li:nth-child(2n+1){color: blue;}						
		</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>

选择的是li的父元素中的偶数个li子元素
< style type="text/css">
li:nth-child(2n){color: blue;}
< /style>

相关推荐
伟笑18 分钟前
React 的常用钩子函数在Vue中是如何设计体现出来的。
前端·react.js
Sapphire~36 分钟前
重学前端003 --- CSS 颜色
前端·css
慧一居士37 分钟前
CSS和CSS3区别对比
前端·css3
我血条子呢37 分钟前
动态组件和插槽
前端·javascript·vue.js
中微子1 小时前
RESTful架构与前后端路由演进:构建现代化Web应用的核心规范
前端
前端付豪1 小时前
13、表格系统架构:列配置、嵌套数据、复杂交互
前端·javascript·架构
南屿im1 小时前
发布订阅模式和观察者模式傻傻分不清?一文搞懂两大设计模式
前端·javascript
I_have_a_lemon1 小时前
前端、产品、设计师神器推荐——Onlook
前端·cursor
前端小巷子1 小时前
深入解析CSRF攻击
前端·安全·面试
JustHappy1 小时前
SPA?MPA?有啥关系?有啥区别?聊一聊页面形态 or 路由模式
前端·javascript·架构