当前位置: 首页 > article >正文

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

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


http://www.kler.cn/a/472263.html

相关文章:

  • 镜舟科技2024年度回顾,坚持长期价值,进一步实现商业突破
  • 数据挖掘——数据预处理
  • 安徽省乡镇界面图层+arcgis数据shp格式-乡镇名称和编码2020年+wgs84坐标内容测评
  • 解锁RDMA 技术:从原理到应用的深度剖析
  • 不停机从 PostgreSQL 迁移到 MySQL
  • (k8s)k8s系列之命令手册速查
  • 单片机软件定时器V4.0
  • nacos学习笔记(一)
  • php函数性能优化中应注意哪些问题
  • 深度学习知识点:RNN
  • [网络安全]BurpSuite爆破实战解题详析之BUUCTF Brute 1
  • 2025运维故障记 2 | 1/6 哪吒汽车官网无法正常访问
  • linux下的MongoDB手动安装部署详解
  • Perlin Noise算法
  • maven的pom.xml配置详解
  • 为什么ip属地一会河南一会江苏
  • Spring Boot项目中使用单一动态SQL方法可能带来的问题
  • 《Opencv》信用卡信息识别项目
  • 【NLP高频面题 - Transformer篇】Position encoding为什么选择相加而不是拼接呢?
  • 2. 模型和算法