本文目标：
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的实现
代码如下：
结构性伪类选择器—nth-child 项目基本情况
- 项目名称
- xxxxxx
- 地理位置
- xxxxxx
- 交通状况
- xxxxxx
- 开发商
- xxxxxx
- 销售代理公司
- xxxxxx
- 商业运营公司
- xxxxxx
- 项目性质
- xxxxxx
- 功能定位
- xxxxxx
- 目标消费群
- xxxxxx
- 开盘时间
- xxxxxx
- 竣工时间
- xxxxxx
- 开业时间
- xxxxxx
- 售楼电话
- xxxxxx
- 销售招商位置
- xxxxxx
- 总建筑面积
- xxxxxx
- 商业面积
- xxxxxx
- 停车位面积
- xxxxxx
- 产权年限
- xxxxxx
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中
结构性伪类选择器—nth-child 项目基本情况
- 项目名称
- xxxxxx
- 地理位置
- xxxxxx
- 交通状况
- xxxxxx
- 开发商
- xxxxxx
- 销售代理公司
- xxxxxx
- 商业运营公司
- xxxxxx
- 项目性质
- xxxxxx
- 功能定位
- xxxxxx
- 目标消费群
- xxxxxx
- 开盘时间
- xxxxxx
- 竣工时间
- xxxxxx
- 开业时间
- xxxxxx
- 售楼电话
- xxxxxx
- 销售招商位置
- xxxxxx
- 总建筑面积
- xxxxxx
- 商业面积
- xxxxxx
- 停车位面积
- xxxxxx
- 产权年限
- xxxxxx
最终运行效果如下：
总结：
1、学习了结构性伪类选择器—nth-child的用法，这里的难点就是在于要写表达式，所以写表达式的时候需要多花点耐心去总结规律
以上就是结构性伪类选择器—nth-child实现彩色表格案例（代码实例 ）的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1615249.html
微信扫一扫 
支付宝扫一扫 
