CSS结构性伪类选择器—nth-of-type实现自定义导航菜单案例解析（代码实例）

林译川

2026-10-01 • 👁 0人浏览过

本文目标： 1、掌握 css 中结构性伪类选择器—nth-of-type的用法问题： 1、实现以下自定义导航菜单，且使用纯DIV+CSS，必须使用结构性伪类选择器—nth-of-type 附加说明： 1、导航宽800px，高90px，居中显示立即学习 “ 前端免费学习笔记（深入） ”； 2、雪花背景图片宽高都是50px，酒瓶图片大小也是一样现在来具体操作 1、准备素材：结合目标效果我们可以做一张酒瓶的图片，背景是透明的，这样背景颜色更改了，它里面透明的部分也可以随之变化，还有左右两片雪花，也是所需的素材 2、创建好index.html，写好架构，架构如何分析呢思路分析： 1、目标导航分为6个子项，所以我们可以使用常用的li来实现它，li是水平排列，所以肯定需要浮动起来，所以最后一个li我们可以清除浮动，达到ul依然可以有效包裹住里面所有的浮动起来的li 2、1,3,5导航背景是蓝色，2,4,6的导航背景是黄色，所以li的颜色都是呈现规律性的变化，所以此时我们可使用nth-of-type 3、每个导航都是上下两部分，上部分是一张图片，下部分是文字好，先按照分析，写好思路，暂时不管css的实现





    
    CSS结构性伪类选择器—nth-of-type实现自定义导航菜单案例解析



    
        
            
                
                    
                
                
                    导航一
                
            
            
                
                    
                
                
                    导航二
                
            
            
                
                    
                
                
                    导航三
                
            
            
                
                    
                
                
                    导航四
                
            
            
                
                    
                
                
                    导航五
                
            
            
                
                    
                
                
                    导航六

3、写样式，创建css文件夹，里面新建index.css，里面的样式怎么写了，以下是分析思路思路分析： .container * 公共样式 1、写了这么多案例，这一步基本上是必不可少的，也是为了减少代码冗余性，所以在这里我们可以定义公共的样式所以index.css中添加代码如下：

.container *{
    padding:0;
    margin:0;
}

.container 外层容器使用HTML,CSS,JavaScript开发Android应用程序英文文字pdf版附源文件如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更下载 1、根据说明得知，宽600,高90，左右填充间隔为100，背景色土黄，带圆角，要居中，背景图片是多个，第一个背景图片水平居左，第二个背景图片水平居右，垂直方向上都是居中，背景图片大小为50px 所以index.css中添加代码如下：

.container{
    width: 600px;
    height: 90px;
    background-color: burlywood;
    color: white;
    margin: 0 auto;
    border-radius: 15px;
    padding:0 100px;
    background-image: url(../images/xh2.png),url(../images/xh2.png);
    background-size: 50px 50px;
    background-position-x: left,right;
    background-repeat: no-repeat;
    background-position-y: center;
}

li 列 1、不带默认黑点，所以list-style:none,水平排列所以float:left,宽度都一样，所以width=600/6=100px,字体居中text-align: center; 所以index.css中添加代码如下：

li{
    list-style: none;
    float: left;
    width:100px;
    text-align: center;
}

img图片 1、根据要求得知宽高都是50，且要居中，所以里面的图片的宽高正好等于图片容器的大小，所以宽100%，高100% 所以index.css中添加代码如下：

.img{
    width: 50px;
    height: 50px;
    margin:0 auto;
    
}
.img img{
    width:100%;
    height: 100%;
}

clear清除浮动列 1、因为该列的目的是清除浮动所以index.css中添加代码如下：

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

title文字 1、上下存有填充距离，所以index.css中添加代码如下：

.title{
    padding:10px;
}

li的单独设置： 1、1,3,5导航背景是蓝色，2,4,6的导航背景是黄色，所以说明奇数列背景是蓝色，偶数列背景是黄色，正好nth-of-type可以带表达式，所以index.css中添加代码如下：

li:nth-of-type(2n){
    background-color:lightgoldenrodyellow;
    color:peru;
}
li:nth-of-type(2n+1){
    background-color:lightblue;
}

到此为止，index.css代码如下：

.container *{
    padding:0;
    margin:0;
}
.container{
    width: 600px;
    height: 90px;
    background-color: burlywood;
    color: white;
    margin: 0 auto;
    border-radius: 15px;
    padding:0 100px;
    background-image: url(../images/xh2.png),url(../images/xh2.png);
    background-size: 50px 50px;
    background-position-x: left,right;
    background-repeat: no-repeat;
    background-position-y: center;
}

li{
    list-style: none;
    float: left;
    width:100px;
    text-align: center;
}
.img{
    width: 50px;
    height: 50px;
    margin:0 auto;
    
}
.img img{
    width:100%;
    height: 100%;
}
li.clear{
    width:0;
    height: 0;
    clear: both;
    float: none;
}
.title{
    padding:10px;
}

li:nth-of-type(2n){
    background-color:lightgoldenrodyellow;
    color:peru;
}
li:nth-of-type(2n+1){
    background-color:lightblue;
}

然后将index.css引入index.html中





    
    CSS结构性伪类选择器—nth-of-type实现自定义导航菜单案例解析
    



    
        
            
                
                    
                
                
                    导航一
                
            
            
                
                    
                
                
                    导航二
                
            
            
                
                    
                
                
                    导航三
                
            
            
                
                    
                
                
                    导航四
                
            
            
                
                    
                
                
                    导航五
                
            
            
                
                    
                
                
                    导航六

最终运行效果如下：总结： 1、学习了结构性伪类选择器—nth-of-type用法，这里的难点也是在于表达式，所以写代码的时候需要多花点耐心去总结规律

相关文章