结构性伪类选择器—nth-child实现彩色表格案例（代码实例）-tutorial css-php.cn

本文目标：

1、掌握CSS中结构性伪类选择器—nth-child的用法

问题：

1、实现以下效果，且使用纯DIV+CSS，必须使用结构性伪类选择器—nth-child

实现目标.png

当鼠标悬停在某个单元格上时，背景变成紫色

实现目标2.png

附加说明：

1、每个单元格宽145，带1个像素边框，左边padding为5，上下padding为15

2、标题字体为20px，加粗

现在来具体操作

1、准备素材：无，不需要准备额外的素材图片

2、创建好index.html，写好架构，架构如何分析呢

思路分析：

1、目标其实是一张表格，我们可以通过很多方式实现它，但是为了更好的显示出nth-child的作用，我们就用ul,li来布局

2、每个li的颜色都是规律性的变化

好，先按照分析，写好思路，暂时不管css的实现

代码如下：

    结构性伪类选择器—nth-child 
   项目基本情况
  项目名称
 xxxxxx
 地理位置
 xxxxxx
 交通状况
 xxxxxx
 开发商
 xxxxxx
 销售代理公司
 xxxxxx
 商业运营公司
 xxxxxx
 项目性质
 xxxxxx
 功能定位
 xxxxxx
 目标消费群
 xxxxxx
 开盘时间
 xxxxxx
 竣工时间
 xxxxxx
 开业时间
 xxxxxx
 售楼电话
 xxxxxx
 销售招商位置
 xxxxxx
 总建筑面积
 xxxxxx
 商业面积
 xxxxxx
 停车位面积
 xxxxxx
 产权年限
 xxxxxx

Salin selepas log masuk

3、写样式，创建css文件夹，里面新建index.css，里面的样式怎么写了，以下是分析思路

思路分析：

整体表格.table

1、根据要求得知，每列的宽是均分的，所以该容器的宽=145*4+8个边框 = 608，且带灰色边框显示

所以index.css中添加代码如下：

.table { width: 608px; border: 1px solid gray; }

Salin selepas log masuk

标题

1、背景色为灰色，字体颜色为白色，上下存有间距，字体大小为20，加粗，居中显示

所以index.css中添加代码如下：

.caption { background-color: gray; color: white; padding: 15px 0px; font-size: 20px; font-weight: bold; text-align: center; }

Salin selepas log masuk

ul,li

1、ul默认是有padding，所以为了不影响布局，需要取消默认padding,margin

2、根据以上要求，li不带黑色圆点，带灰色边框，宽145，上下存有间距，且水平排列所以必须要浮动float

所以index.css中添加代码如下：

ul{ padding: 0; margin: 0; } li{ list-style: none; border:1px solid lightgray; width: 145px; padding:15px 0 15px 5px; float: left; }

Salin selepas log masuk

清除浮动的li

1、为了让ul还是能包裹住浮动的li，所以最后一列要清除浮动，但是为了不影响布局，所以宽高要设置0，padding,margin也要设置0，否则也还是会有padding

所以index.css中添加代码如下：

.clear{ width:0; height: 0; float: none; clear: both; padding: 0; margin: 0; }

Salin selepas log masuk

带红色字体的li

1、我们发现带红色字体的li，其实它的li的序号分别为3,7,11，15，19,23......这个是有规律的，所以我们可以使用nth-child选择器来实现，nth-child()括号里可以填写表达式，比如2n这些，表达式的n是从0开始的，所以根据这个规律我们可以得出表达式为4n+3，我们可以把n从0开始代入可以发现会得出序号3,7,11，15，19,23......所以表达式是对的

所以index.css中添加代码如下：

ul>:nth-child(4n+3){ color:red; }

Salin selepas log masuk

带绿色字体的li

1、我们发现带绿色字体的li，其实它的li的序号分别为1，5,9,13,17,21,25.....这个也是有规律的，所以我们可以使用nth-child选择器来实现，那么这个表达式怎么写呢，仔细研究发现表达式为

4n+1,我们可以把n从0开始代入可以发现会得出序号1,5,9,13......所以表达式是对的

所以index.css中添加代码如下：

ul>:nth-child(4n+1){ color:green; }

Salin selepas log masuk

带蓝色字体的li

1、我们发现带蓝色字体的li，其实它的li的序号分别为2,4,6,8,10，12.....这个也是有规律的，其实就是偶数列，只是少了0，所以我们可以使用nth-child选择器来实现，那么这个表达式怎么写呢，仔细研究发现表达式为2n+2,我们可以把n从0开始代入可以发现会得出序号2,4,6,8,10,12......所以表达式是对的,其实表达式也可以写成2n，只不过因为0列不存在所以也是对的，不影响最终效果

所以index.css中添加代码如下：

ul>:nth-child( 2n+2 ){ color:blue; }

Salin selepas log masuk

最后4列

1、最后4列（序号为33,34,35,36的li）我们发现底部边框是不需要的，所以需要去除掉，因为最外层的容器的已经有个边框了

所以index.css中添加代码如下：

ul>:nth-child(33){ border-bottom: 0; } ul>:nth-child(34){ border-bottom: 0; } ul>:nth-child(35){ border-bottom: 0; } ul>:nth-child(36){ border-bottom: 0; }

Salin selepas log masuk

鼠标悬浮效果

1、当鼠标悬浮的时候，背景需要变色变成紫色

所以index.css中添加代码如下：

li:hover{ background-color: plum; cursor: pointer; }

Salin selepas log masuk

到此为止，index.css代码如下：

.table { width: 608px; border: 1px solid gray; } .caption { background-color: gray; color: white; padding: 15px 0px; font-size: 20px; font-weight: bold; text-align: center; } ul{ padding: 0; margin: 0; } li{ list-style: none; border:1px solid lightgray; width: 145px; padding:15px 0 15px 5px; float: left; } .clear{ width:0; height: 0; float: none; clear: both; padding: 0; margin: 0; } ul>:nth-child(4n+3){ color:red; } ul>:nth-child(4n+1){ color:green; } ul>:nth-child( 2n+2 ){ color:blue; } ul>:nth-child(33){ border-bottom: 0; } ul>:nth-child(34){ border-bottom: 0; } ul>:nth-child(35){ border-bottom: 0; } ul>:nth-child(36){ border-bottom: 0; } li:hover{ background-color: plum; cursor: pointer; }

Salin selepas log masuk

然后将index.css引入index.html中

    结构性伪类选择器—nth-child  
   项目基本情况
  项目名称
 xxxxxx
 地理位置
 xxxxxx
 交通状况
 xxxxxx
 开发商
 xxxxxx
 销售代理公司
 xxxxxx
 商业运营公司
 xxxxxx
 项目性质
 xxxxxx
 功能定位
 xxxxxx
 目标消费群
 xxxxxx
 开盘时间
 xxxxxx
 竣工时间
 xxxxxx
 开业时间
 xxxxxx
 售楼电话
 xxxxxx
 销售招商位置
 xxxxxx
 总建筑面积
 xxxxxx
 商业面积
 xxxxxx
 停车位面积
 xxxxxx
 产权年限
 xxxxxx