nth-child选择器在表格里的应用分享

 时间:2026-02-14 12:11:04

1、结构就是一个 div 中包裹着表格,表格有表头(thead ,th),和表格的主体(tbody);(具体的看图片,详解太麻烦....)

nth-child选择器在表格里的应用分享

nth-child选择器在表格里的应用分享

2、这个 就是通过 div 的选择器  .demo 控制一下div的位置这样间接的控制了 表格位置;

nth-child选择器在表格里的应用分享

nth-child选择器在表格里的应用分享

3、默认的表格是没有将边框显示出来的;所以我们要将边框显示(边框缝隙也要除去)

border-collapsed:collapse;将单元格的空白间距消除;

nth-child选择器在表格里的应用分享

nth-child选择器在表格里的应用分享

4、然后我们开始控制 表头 的样式;

thead选择器将背景色确定;

thead th:nth-child(n),将所有的th选择赋予样式;

thead th:nth-child(2),则是单独控制第二个单元格,控制它更宽,和控制字体;(具体的讲解百度可以搜到,这里不做详解,知道这样就能选中要的的单元格 就行了)

nth-child选择器在表格里的应用分享

nth-child选择器在表格里的应用分享

5、之后的就是以 tbody 和 tr 为父元素 控制主体的单元格样式(但是这样有时会不精确...);

nth-child选择器在表格里的应用分享

nth-child选择器在表格里的应用分享

6、之后用

tbody  tr:nth-child(3)控制第三行,有鼠标悬停变色的效果;

nth-child选择器在表格里的应用分享

nth-child选择器在表格里的应用分享

  • Windows10如何做体验测评
  • css如何将table表格背景色设置为渐变色
  • 设置Windows7账户与权限
  • win10开启自动更正我键入的拼写错误
  • 在VMware Workstation开启GNS3虚拟机的KVM方法
  • 热门搜索
    怎么减脂肪 瘦肉怎么做好吃 北京信息科技大学怎么样 吃多了想吐怎么办 ps图层怎么解锁 老放屁怎么回事 嗓子有痰是怎么回事 青豆怎么做好吃 无线鼠标怎么用 奥利司他胶囊怎么样