結構性偽類選擇器—nth-child實作彩色表格案例（程式碼實例）-css教學-PHP中文網

本文目標：

1、掌握CSS中結構性偽類選擇器—nth-child的用法

問題：

1、實現以下效果，且使用純DIV CSS，必須使用結構性偽類別選擇器—nth-child

結構性偽類選擇器—nth-child實作彩色表格案例（程式碼實例）

當滑鼠停留在某個儲存格上時，背景變成紫色

結構性偽類選擇器—nth-child實作彩色表格案例（程式碼實例）

附加說明：

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"> </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"> </li>
        </ul>

    </div>
</body>

</html>

登入後複製

最终运行效果如下：

結構性偽類選擇器—nth-child實作彩色表格案例（程式碼實例）