溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
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的實現
代碼如下：
<!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>最終運行效果如下：
1、學習了結構性偽類選擇器—nth-child的用法，這里的難點就是在于要寫表達式，所以寫表達式的時候需要多花點耐心去總結規律
以上就是結構性偽類選擇器—nth-child實現彩色表格案例（代碼實例 ）的詳細內容，更多請關注億速云其它相關文章！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
