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的實作
程式碼如下:
<!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實作彩色表格案例(程式碼實例 )的詳細內容。更多資訊請關注PHP中文網其他相關文章!