使用CSS单独设置不同li标签样式的方法

发布时间:2020-04-14   文章分类:网页技术课堂

在制作网页设计时,有时候怎需要用css控制第一个li标签 或者 某个的样式,和其他li的样式不同,可以参考以下方法。

单独设置第几个LI的样式,实例:
.contact-sub {
	display: inline-block;
	width: 30%;
	margin-bottom: 35px;
	position: relative;
	line-height: 26px;
	padding-left: 40px;
	padding-right: 15px;
	vertical-align: top
}
.contact-sub:nth-child(2n) {
	width: 70%
}


偶数个和奇数个li标签单独设置样式,实例:
.center_top_right ul li:nth-child(odd){   //奇数
    list-style: none;
    width: 90px;
    height: 70px;
    float: right;
}
.center_top_right ul li:nth-child(even){   //偶数
    list-style: none;
    width: 10px;
    height: 70px;
    color: #666;  
    float: right;
}

STU网页公众号

专注于Dreamweaver网页设计作业,大学生DW网页作业定制,HTML静态网页制作作业,简单网页作业成品模版免费下载,高中至大学一二三年级网站作业定制设计...