当前位置: 首页 > 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;
}
http://www.lryc.cn/news/243033.html

相关文章:

  • CSS实现三角形
  • mysql 与 Oracle 的区别,oracle 与 mysql分页查询的区别
  • 原生实现底部弹窗效果 h5 小程序
  • 最新Midjourney绘画提示词Prompt教程无需魔法
  • 大一统模型 Universal Instance Perception as Object Discovery and Retrieval 论文阅读笔记
  • java springboot测试类虚拟MVC环境 匹配返回值与预期内容是否相同 (JSON数据格式) 版
  • react等效memo的方法
  • 2023年亚太杯数学建模A题解题思路(*基于OpenCV的复杂背景下苹果目标的识别定位方法研究)
  • 【机器学习】聚类(三):原型聚类:高斯混合聚类
  • 线上ES集群参数配置引起的业务异常案例分析
  • 【Docker】Docker 仓库管理和Docker Dockerfile
  • 面试必问:如何快速定位BUG?BUG定位技巧及N板斧!
  • 力扣114. 二叉树展开为链表(java,用树模拟链表)
  • 学生成绩管理系统(python实现)
  • 【Leetcode合集】1410. HTML 实体解析器
  • 04-React脚手架 集成Axios
  • 时序预测 | MATLAB实现基于BiLSTM-AdaBoost双向长短期记忆网络结合AdaBoost时间序列预测
  • 【nlp】3.6 Tansformer模型构建(编码器与解码器模块耦合)
  • 【【Linux系统下常用指令学习 之 二 】】
  • Git-将指定文件回退到指定版本
  • docker环境安装
  • 【Java】智慧工地云平台源码(APP+SaaS模式)
  • 2016年11月10日 Go生态洞察:七年的Go语言旅程
  • 深入了解Java中SQL优化的关键技巧与实践
  • 6.3.WebRTC中的SDP类的结构
  • ArcGis如何用点连线?
  • 自定义精美商品分类列表组件 侧边栏商品分类组件 category组件(适配vue3)
  • 造一个float类型二维矩阵,并将二维矩阵存快速储到一个float*中(memcpy)
  • python通过继承、组合、委托组织类
  • OSG粒子系统与阴影-自定义粒子系统示例<1>(4)