您的位置首页百科知识

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

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

的有关信息介绍如下:

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

小编在近期的 css 学习中学到了 可以不用给元素添加选择器就可以直接用 css 控制样式的结构伪类选择器,这里分享一下小编使用的 nth-child 选择器;(具体的选择器知识可以去百度)

17用 Sublime Text 2 写一个简单的网页

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

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

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

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

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

thead选择器将背景色确定;

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

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

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

之后用

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