当前位置: 主页>网站教程>CSS教程> 构造性伪类选中器—nth-child实现彩色表格案例（代码实例）

分享文章到：

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

发布时间：09/01 来源：未知浏览：关键词：

本文目标：

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的实现

代码如下：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>构造性伪类选中器—nth-child</title>
</head>

<body>
    <div class="table">
        <div class="caption">项目根本状况</div>
        <ul>
            <li>项目名称</li>
            <li>xxxxxx</li>
            <li>地理位置</li>
            <li>xxxxxx</li>

            <li>交通情况</li>
            <li>xxxxxx</li>
            <li>开发商</li>
            <li>xxxxxx</li>

            <li>零售代理公司</li>
            <li>xxxxxx</li>
            <li>商业运营公司</li>
            <li>xxxxxx</li>

            <li>项目性质</li>
            <li>xxxxxx</li>
            <li>功效定位</li>
            <li>xxxxxx</li>

            <li>目标消耗群</li>
            <li>xxxxxx</li>
            <li>开盘时间</li>
            <li>xxxxxx</li>

            <li>完工时间</li>
            <li>xxxxxx</li>
            <li>开业时间</li>
            <li>xxxxxx</li>

            <li>售楼电话</li>
            <li>xxxxxx</li>
            <li>零售招商位置</li>
            <li>xxxxxx</li>

            <li>总建筑面积</li>
            <li>xxxxxx</li>
            <li>商业面积</li>
            <li>xxxxxx</li>

            <li>泊车位面积</li>
            <li>xxxxxx</li>
            <li>产权年限</li>
            <li>xxxxxx</li>
            <li class="clear">&nbsp;</li>
        </ul>

    </div>
</body>

</html>

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中

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>构造性伪类选中器—nth-child</title>
    <link href="css/index.css" rel="stylesheet" type="text/css">
</head>

<body>
    <div class="table">
        <div class="caption">项目根本状况</div>
        <ul>
            <li>项目名称</li>
            <li>xxxxxx</li>
            <li>地理位置</li>
            <li>xxxxxx</li>

            <li>交通情况</li>
            <li>xxxxxx</li>
            <li>开发商</li>
            <li>xxxxxx</li>

            <li>零售代理公司</li>
            <li>xxxxxx</li>
            <li>商业运营公司</li>
            <li>xxxxxx</li>

            <li>项目性质</li>
            <li>xxxxxx</li>
            <li>功效定位</li>
            <li>xxxxxx</li>

            <li>目标消耗群</li>
            <li>xxxxxx</li>
            <li>开盘时间</li>
            <li>xxxxxx</li>

            <li>完工时间</li>
            <li>xxxxxx</li>
            <li>开业时间</li>
            <li>xxxxxx</li>

            <li>售楼电话</li>
            <li>xxxxxx</li>
            <li>零售招商位置</li>
            <li>xxxxxx</li>

            <li>总建筑面积</li>
            <li>xxxxxx</li>
            <li>商业面积</li>
            <li>xxxxxx</li>

            <li>泊车位面积</li>
            <li>xxxxxx</li>
            <li>产权年限</li>
            <li>xxxxxx</li>
            <li class="clear">&nbsp;</li>
        </ul>

    </div>
</body>

</html>

终究运转结果如下：

实现目标.png