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

css之选择第一个或最后一个元素、第n个标签、选择偶数或奇数标签、选择最后n个标签、等差数列标签的选择、first、last、nth、child

MENU

  • first-child选择列表中的第一个标签
  • last-child选择列表中的最后一个标签
  • nth-child(n)选择列表中的第n个标签
  • nth-child(2n)选择列表中的偶数位标签
  • nth-child(2n-1)选择列表中的奇数位标签
  • nth-child(n+m)选择从第m个到最后一个标签
  • nth-child(-n+m)选择从第1个到第m个
  • nth-last-child(3)选择最后3个标签
  • nth-last-child(3n)选择3倍数位的标签
  • nth-last-child(3n-1)选择等差数列的标签


first-child选择列表中的第一个标签

li:first-child {color: red;
}

last-child选择列表中的最后一个标签

li:last-child {color: pink;
}

nth-child(n)选择列表中的第n个标签

li:nth-child(3) {color: pink;
}

nth-child(2n)选择列表中的偶数位标签

li:nth-child(2n) {color: pink;
}

nth-child(2n-1)选择列表中的奇数位标签

li:nth-child(2n-1) {color: pink;
}

nth-child(n+m)选择从第m个到最后一个标签

li:nth-child(n+5) {color: pink;
}

nth-child(-n+m)选择从第1个到第m个

li:nth-child(-n+5) {color: pink;
}

nth-last-child(3)选择最后3个标签

li:nth-last-child(3) {color: pink;
}

nth-last-child(3n)选择3倍数位的标签

li:nth-last-child(3n) {color: pink;
}

nth-last-child(3n-1)选择等差数列的标签

li:nth-last-child(3n-1) {color: pink;
}

相关文章:

  • 【密码学引论】Hash密码
  • 简易版扫雷+代码分析
  • LuatOS-SOC接口文档(air780E)--pwm - PWM模块
  • Elasticsearch 聚合查询(Aggregation)详解
  • k8s中pod的hostport端口突然无法访问故障处理
  • ArcGIS中如何建立土地利用规划数据库
  • 【算法心得】When data range not large, try Bucket sort
  • 【Linux基础】Linux常见指令总结及周边小知识
  • 02-鸿蒙学习之4.0todoList练习
  • PTA: 螺旋矩阵
  • 计算机毕业设计 基于微信小程序的“共享书角”图书借还管理系统的设计与实现 Java实战项目 附源码+文档+视频讲解
  • 9.Docker的虚悬镜像-Dangling Image
  • 爬虫爬取百度图片、搜狗图片
  • cocos2dx ​​Animate3D (一)
  • Java面试-微服务篇-SpringCloud
  • 2017 年终总结 —— 在路上
  • bearychat的java client
  • C++类的相互关联
  • CNN 在图像分割中的简史:从 R-CNN 到 Mask R-CNN
  • CoolViewPager:即刻刷新,自定义边缘效果颜色,双向自动循环,内置垂直切换效果,想要的都在这里...
  • Effective Java 笔记(一)
  • hadoop入门学习教程--DKHadoop完整安装步骤
  • HTTP那些事
  • Java方法详解
  • leetcode-27. Remove Element
  • Mac转Windows的拯救指南
  • Mithril.js 入门介绍
  • npx命令介绍
  • overflow: hidden IE7无效
  • rabbitmq延迟消息示例
  • Vue组件定义
  • 从零开始学习部署
  • 对话:中国为什么有前途/ 写给中国的经济学
  • 浮现式设计
  • 全栈开发——Linux
  • 使用前端开发工具包WijmoJS - 创建自定义DropDownTree控件(包含源代码)
  • 通过来模仿稀土掘金个人页面的布局来学习使用CoordinatorLayout
  • 用 vue 组件自定义 v-model, 实现一个 Tab 组件。
  • 云大使推广中的常见热门问题
  • 字符串匹配基础上
  • gunicorn工作原理
  • SAP CRM里Lead通过工作流自动创建Opportunity的原理讲解 ...
  • 资深实践篇 | 基于Kubernetes 1.61的Kubernetes Scheduler 调度详解 ...
  • ​软考-高级-信息系统项目管理师教程 第四版【第23章-组织通用管理-思维导图】​
  • ​一帧图像的Android之旅 :应用的首个绘制请求
  • # Java NIO(一)FileChannel
  • # 安徽锐锋科技IDMS系统简介
  • #【QT 5 调试软件后,发布相关:软件生成exe文件 + 文件打包】
  • #162 (Div. 2)
  • #大学#套接字
  • (02)Cartographer源码无死角解析-(03) 新数据运行与地图保存、加载地图启动仅定位模式
  • (1)(1.13) SiK无线电高级配置(五)
  • (4) PIVOT 和 UPIVOT 的使用
  • (Bean工厂的后处理器入门)学习Spring的第七天
  • (安全基本功)磁盘MBR,分区表,活动分区,引导扇区。。。详解与区别