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

作者 : alan 本文共424个字,预计阅读时间需要2分钟 发布时间: 2021-01-15 共347人阅读

本章节介绍一下如何实现匹配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样式

常见问题FAQ

免费下载或者VIP会员专享资源能否直接商用?
本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
提示下载完但解压或打开不了?
最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。 若排除这种情况,可在对应资源底部留言,或 联络我们。