小胖墩er 小胖墩er
首页
  • 前端文章

    • JavaScript
    • Vue
    • ES6
    • Git
  • Vue
  • React
  • HTML
  • CSS
  • 工具类
  • GitHub技巧
  • 博客搭建
  • 友情链接
💖关于
💻收藏
  • 分类
  • 标签
  • 归档
📭主页 (opens new window)
GitHub (opens new window)

小胖墩er

Better later than never.
首页
  • 前端文章

    • JavaScript
    • Vue
    • ES6
    • Git
  • Vue
  • React
  • HTML
  • CSS
  • 工具类
  • GitHub技巧
  • 博客搭建
  • 友情链接
💖关于
💻收藏
  • 分类
  • 标签
  • 归档
📭主页 (opens new window)
GitHub (opens new window)
  • CSS动画效果

  • CSS&CSS预处理器

    • Less的基本使用
    • Sass的基本使用
    • 这些CSS3动画你get了吗?
    • CSS选取第n个标签元素
      • 1、first-child
      • 2、last-child
      • 3、nth-child(3)
      • 4、nth-child(2n)
      • 5、nth-child(2n-1)
      • 6、nth-child(n+3)
      • 7、nth-child(-n+3)
      • 8、nth-last-child(3)
  • Element-UI

  • 页面布局
  • CSS&CSS预处理器
小胖墩er
2021-11-18

CSS选取第n个标签元素

# 1、first-child

first-child表示选择列表中的第一个标签。例如:li:first-child{background:#fff}

# 2、last-child

last-child表示选择列表中的最后一个标签,例如:li:last-child{background:#fff}

# 3、nth-child(3)

表示选择列表中的第3个标签,例如:li:nth-child(3){background:#fff},代码中的3也可以改成其它数字,如4、5等。想选择第几个标签,就填写几。

# 4、nth-child(2n)

这个表示选择列表中的偶数标签,即选择 第2、第4、第6…… 标签,例如:li:nth-child(2n){background:#fff}

# 5、nth-child(2n-1)

这个表示选择列表中的奇数标签,即选择 第1、第3、第5、第7……标签,例如:li:nth-child(2n-1){background:#fff}

# 6、nth-child(n+3)

这个表示选择列表中的标签从第3个开始到最后。

# 7、nth-child(-n+3)

这个表示选择列表中的标签从0到3,即小于3的标签。

# 8、nth-last-child(3)

这个表示选择列表中的倒数第3个标签。

在线编辑 (opens new window)
#CSS
上次更新: 2021/11/18, 14:03:38
这些CSS3动画你get了吗?
Element使用合集1

← 这些CSS3动画你get了吗? Element使用合集1→

最近更新
01
毛玻璃效果
11-23
02
svg基本绘制
11-23
03
滑动登录界面
11-23
更多文章>
🖥️

© 2021 小胖墩er 💌 粤ICP备2021158933号 🛀 Theme by 💝 Vdoing

  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式
×