纯CSS设置第n个li元素样式或改变指定li样式

本章节介绍一下如何实现匹配li元素中第n个li元素,然后设置此li元素的样式。

代码实例如下:

<div class=”b”>

<ul>

<li><a  href=””>样式一</a> </li>

<li><a  href=””>样式二</a> </li>

<li><a  href=””>样式三</a> </li>

<li><a  href=””>样式四</a> </li>

<li><a  href=””>样式五</a> </li>

<li><a  href=””>样式六</a> </li>

</ul>

</div>

.b ul li:nth-child(2) a {

width: 80px;

}

.b ul li:nth-child(3) a {

width: 40px;

right: -273px;

}

.b ul li:nth-child(6) a {

width: 70px;

right: -273px;

}

以上代码可以将第2、第3、第6个li元素中的a链接宽度自定义为其他数值。

方法,只需要将括号内的数字改成你想要的排列序号就行。

时光资源网平台互联网从业者提供精品源码下载和建站资源的交流分享
时光资源网-大蓝网络科技 » 纯CSS设置第n个li元素样式或改变指定li样式

提供最优质的资源集合

立即查看 了解详情