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

本文目标：

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

问题：

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

附加说明：

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

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

现在来具体操作

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

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

思路分析：

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

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

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

代码如下：

    
    



    

        
项目基本情况
        

            
项目名称
            
xxxxxx
            
地理位置
            
xxxxxx

            
交通状况
            
xxxxxx
            
开发商
            
xxxxxx

            
销售代理公司
            
xxxxxx
            
商业运营公司
            
xxxxxx

            
项目性质
            
xxxxxx
            
功能定位
            
xxxxxx

            
目标消费群
            
xxxxxx
            
开盘时间
            
xxxxxx

            
竣工时间
            
xxxxxx
            
开业时间
            
xxxxxx

            
售楼电话
            
xxxxxx
            
销售招商位置
            
xxxxxx

            
总建筑面积
            
xxxxxx
            
商业面积
            
xxxxxx

            
停车位面积
            
xxxxxx
            
产权年限
            
xxxxxx
            
 
        

    

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

思路分析：

整体表格.table

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

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

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

标题

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

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

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

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;
}

清除浮动的li

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

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

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

带红色字体的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;
}

带绿色字体的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;
}

带蓝色字体的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;
}

最后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;
}

鼠标悬浮效果

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

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

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

到此为止，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;
}

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

    
    
    



    

        
项目基本情况
        

            
项目名称
            
xxxxxx
            
地理位置
            
xxxxxx

            
交通状况
            
xxxxxx
            
开发商
            
xxxxxx

            
销售代理公司
            
xxxxxx
            
商业运营公司
            
xxxxxx

            
项目性质
            
xxxxxx
            
功能定位
            
xxxxxx

            
目标消费群
            
xxxxxx
            
开盘时间
            
xxxxxx

            
竣工时间
            
xxxxxx
            
开业时间
            
xxxxxx

            
售楼电话
            
xxxxxx
            
销售招商位置
            
xxxxxx

            
总建筑面积
            
xxxxxx
            
商业面积
            
xxxxxx

            
停车位面积
            
xxxxxx
            
产权年限
            
xxxxxx
            
 
        

    

最终运行效果如下：

总结：

1、学习了结构性伪类选择器—nth-child的用法，这里的难点就是在于要写表达式，所以写表达式的时候需要多花点耐心去总结规律

以上就是结构性伪类选择器—nth-child实现彩色表格案例（代码实例 ）的详细内容，更多请关注 第一PHP社区 其它相关文章！