溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

CSS中結(jié)構(gòu)性偽類選擇器的用法

發(fā)布時(shí)間：2020-06-11 15:12:30 來源：億速云 閱讀：311 作者：鴿子 欄目：web開發(fā)

問題：

1、實(shí)現(xiàn)以下效果，且使用純DIV+CSS，必須使用結(jié)構(gòu)性偽類選擇器—nth-child

CSS中結(jié)構(gòu)性偽類選擇器的用法

當(dāng)鼠標(biāo)懸停在某個(gè)單元格上時(shí)，背景變成紫色

CSS中結(jié)構(gòu)性偽類選擇器的用法

附加說明：

1、每個(gè)單元格寬145，帶1個(gè)像素邊框，左邊padding為5，上下padding為15

2、標(biāo)題字體為20px，加粗

現(xiàn)在來具體操作

1、準(zhǔn)備素材：無，不需要準(zhǔn)備額外的素材圖片

2、創(chuàng)建好index.html，寫好架構(gòu)，架構(gòu)如何分析呢

思路分析：

1、目標(biāo)其實(shí)是一張表格，我們可以通過很多方式實(shí)現(xiàn)它，但是為了更好的顯示出nth-child的作用，我們就用ul,li來布局

2、每個(gè)li的顏色都是規(guī)律性的變化

好，先按照分析，寫好思路，暫時(shí)不管css的實(shí)現(xiàn)

代碼如下：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>結(jié)構(gòu)性偽類選擇器—nth-child</title>
</head>

<body>
    <div class="table">
        <div class="caption">項(xiàng)目基本情況</div>
        <ul>
            <li>項(xiàng)目名稱</li>
            <li>xxxxxx</li>
            <li>地理位置</li>
            <li>xxxxxx</li>

            <li>交通狀況</li>
            <li>xxxxxx</li>
            <li>開發(fā)商</li>
            <li>xxxxxx</li>

            <li>銷售代理公司</li>
            <li>xxxxxx</li>
            <li>商業(yè)運(yùn)營公司</li>
            <li>xxxxxx</li>

            <li>項(xiàng)目性質(zhì)</li>
            <li>xxxxxx</li>
            <li>功能定位</li>
            <li>xxxxxx</li>

            <li>目標(biāo)消費(fèi)群</li>
            <li>xxxxxx</li>
            <li>開盤時(shí)間</li>
            <li>xxxxxx</li>

            <li>竣工時(shí)間</li>
            <li>xxxxxx</li>
            <li>開業(yè)時(shí)間</li>
            <li>xxxxxx</li>

            <li>售樓電話</li>
            <li>xxxxxx</li>
            <li>銷售招商位置</li>
            <li>xxxxxx</li>

            <li>總建筑面積</li>
            <li>xxxxxx</li>
            <li>商業(yè)面積</li>
            <li>xxxxxx</li>

            <li>停車位面積</li>
            <li>xxxxxx</li>
            <li>產(chǎn)權(quán)年限</li>
            <li>xxxxxx</li>
            <li class="clear">&nbsp;</li>
        </ul>

    </div>
</body>

</html>

3、寫樣式 ，創(chuàng)建css文件夾，里面新建index.css，里面的樣式怎么寫了，以下是分析思路

思路分析：

整體表格.table

1、根據(jù)要求得知，每列的寬是均分的，所以該容器的寬=145*4+8個(gè)邊框 = 608，且?guī)Щ疑吙蝻@示

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

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

標(biāo)題

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默認(rèn)是有padding，所以為了不影響布局，需要取消默認(rèn)padding,margin

2、根據(jù)以上要求，li不帶黑色圓點(diǎn)，帶灰色邊框，寬145，上下存有間距，且水平排列所以必須要浮動(dòng)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;
}

清除浮動(dòng)的li

1、為了讓ul還是能包裹住浮動(dòng)的li，所以最后一列要清除浮動(dòng)，但是為了不影響布局，所以寬高要設(shè)置0，padding,margin也要設(shè)置0，否則也還是會(huì)有padding

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

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

帶紅色字體的li

1、我們發(fā)現(xiàn)帶紅色字體的li，其實(shí)它的li的序號分別為3,7,11，15，19,23......這個(gè)是有規(guī)律的，所以我們可以使用nth-child選擇器來實(shí)現(xiàn)，nth-child()括號里可以填寫表達(dá)式，比如2n這些，表達(dá)式的n是從0開始的，所以根據(jù)這個(gè)規(guī)律我們可以得出表達(dá)式為4n+3，我們可以把n從0開始代入可以發(fā)現(xiàn)會(huì)得出序號3,7,11，15，19,23......所以表達(dá)式是對的

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

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

帶綠色字體的li

1、我們發(fā)現(xiàn)帶綠色字體的li，其實(shí)它的li的序號分別為1，5,9,13,17,21,25.....這個(gè)也是有規(guī)律的，所以我們可以使用nth-child選擇器來實(shí)現(xiàn)，那么這個(gè)表達(dá)式怎么寫呢，仔細(xì)研究發(fā)現(xiàn)表達(dá)式為

4n+1,我們可以把n從0開始代入可以發(fā)現(xiàn)會(huì)得出序號1,5,9,13......所以表達(dá)式是對的

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

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

帶藍(lán)色字體的li

1、我們發(fā)現(xiàn)帶藍(lán)色字體的li，其實(shí)它的li的序號分別為2,4,6,8,10，12.....這個(gè)也是有規(guī)律的，其實(shí)就是偶數(shù)列，只是少了0，所以我們可以使用nth-child選擇器來實(shí)現(xiàn)，那么這個(gè)表達(dá)式怎么寫呢，仔細(xì)研究發(fā)現(xiàn)表達(dá)式為2n+2,我們可以把n從0開始代入可以發(fā)現(xiàn)會(huì)得出序號2,4,6,8,10,12......所以表達(dá)式是對的,其實(shí)表達(dá)式也可以寫成2n，只不過因?yàn)?列不存在所以也是對的，不影響最終效果

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

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

最后4列

1、最后4列（序號為33,34,35,36的li）我們發(fā)現(xiàn)底部邊框是不需要的，所以需要去除掉，因?yàn)樽钔鈱拥娜萜鞯囊呀?jīng)有個(gè)邊框了

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

鼠標(biāo)懸浮效果

1、當(dāng)鼠標(biāo)懸浮的時(shí)候，背景需要變色變成紫色

所以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>結(jié)構(gòu)性偽類選擇器—nth-child</title>
    <link href="css/index.css" rel="stylesheet" type="text/css">
</head>

<body>
    <div class="table">
        <div class="caption">項(xiàng)目基本情況</div>
        <ul>
            <li>項(xiàng)目名稱</li>
            <li>xxxxxx</li>
            <li>地理位置</li>
            <li>xxxxxx</li>

            <li>交通狀況</li>
            <li>xxxxxx</li>
            <li>開發(fā)商</li>
            <li>xxxxxx</li>

            <li>銷售代理公司</li>
            <li>xxxxxx</li>
            <li>商業(yè)運(yùn)營公司</li>
            <li>xxxxxx</li>

            <li>項(xiàng)目性質(zhì)</li>
            <li>xxxxxx</li>
            <li>功能定位</li>
            <li>xxxxxx</li>

            <li>目標(biāo)消費(fèi)群</li>
            <li>xxxxxx</li>
            <li>開盤時(shí)間</li>
            <li>xxxxxx</li>

            <li>竣工時(shí)間</li>
            <li>xxxxxx</li>
            <li>開業(yè)時(shí)間</li>
            <li>xxxxxx</li>

            <li>售樓電話</li>
            <li>xxxxxx</li>
            <li>銷售招商位置</li>
            <li>xxxxxx</li>

            <li>總建筑面積</li>
            <li>xxxxxx</li>
            <li>商業(yè)面積</li>
            <li>xxxxxx</li>

            <li>停車位面積</li>
            <li>xxxxxx</li>
            <li>產(chǎn)權(quán)年限</li>
            <li>xxxxxx</li>
            <li class="clear">&nbsp;</li>
        </ul>

    </div>
</body>

</html>

最終運(yùn)行效果如下：

CSS中結(jié)構(gòu)性偽類選擇器的用法

CSS中結(jié)構(gòu)性偽類選擇器的用法

總結(jié)：

1、學(xué)習(xí)了結(jié)構(gòu)性偽類選擇器—nth-child的用法，這里的難點(diǎn)就是在于要寫表達(dá)式，所以寫表達(dá)式的時(shí)候需要多花點(diǎn)耐心去總結(jié)規(guī)律

以上就是結(jié)構(gòu)性偽類選擇器—nth-child實(shí)現(xiàn)彩色表格案例（代碼實(shí)例 ）的詳細(xì)內(nèi)容，更多請關(guān)注億速云其它相關(guān)文章！

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手