css伪类选择器之first-child,last-child,nth-child()

最新推荐文章于 2024-03-28 14:54:47 发布

李小白cc

最新推荐文章于 2024-03-28 14:54:47 发布

阅读量1.9k

点赞数 5

分类专栏： web前端文章标签： css css伪类选择器 first-child last-child nth-child

本文链接：https://blog.csdn.net/qq_43390061/article/details/88092099

版权

web前端专栏收录该内容

15 篇文章 1 订阅

订阅专栏

今天没上班，脑袋不太清晰，就简单给小白们讲一个很实用的css伪类选择器，这个在你们写导航或者其他列表类的css时特别实用，而且利于后期维护。
这个选择器就是元素:fist-child / last-child / nth-child(子节点序号)
例如此时我们需要写一个一级导航：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>李小白的float测试</title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			a{
				text-decoration: none;
			}
			div{
				width: 500px;
				height: 50px;
				margin: 0 auto;
				background-color: rgba(178,199,225,.8);
			}
			ul{
				list-style: none;
				float: right;
			}
			ul li{
				height: 100%;
				float: left;
				line-height:50px ;
			}
			ul li a{
				padding: 0 10px;
				color: black;
				border-right: 1px solid #FF0000;
				
			}
			
		</style>
	</head>
	<body>
		<div>
			<ul>
				<li><a href="#">哈哈哈哈</a></li>
				<li><a href="#">哈哈哈</a></li>
				<li><a href="#">哈哈哈哈哈哈</a></li>
				<li><a href="#">哈哈</a></li>			
			</ul>
		</div>
	</body>
</html>

效果如下：
在这里插入图片描述
此时我们通常不需要最后一个导航的右边框，这个时候就可以用到我们刚介绍的伪类选择器了
选中最后一个a，去掉其右边框：

ul li:last-child a{
				border-right: none;
			}

写上这句后我们来看看效果：
在这里插入图片描述
可以看到没有右边框了，这句代码的意思是，首先找到页面中的ul 然后找到这个ul中的最后一个li，然后找到最后一个li中的a。对应的我们也可以使用ul li:first-child a找到第一个li中的a
所以这是非常方便的，不需要重新起名字，并且幸运的是它非常便于后期维护，如果后期需要加菜单，直接复制粘贴对应的li在下面即可，不需要重新写css，因为它相对找的总是最后一个子节点。
此处要注意不能找错了，前面的写的元素和后面的first-child以及last-child所找的元素一定要是对应的：例如

<body>
		<div>
			<ul>
				<li><a href="#">哈哈哈哈</a></li>
				<li><a href="#">哈哈哈</a></li>
				<li><a href="#">哈哈哈哈哈哈</a></li>
				<li><a href="#">哈哈</a></li>	
				<span></span>
			</ul>
		</div>
	</body>

此时我们写 ul li:last-child a是错误的因为最后一个元素不是li而是span。即“li”和last-child不能对应。last-child一定是相对于这一层元素中的最后一个元素。所以此时我们写上ul span:last-child是对的，小白可以简单的理解为该选择器是需要你先确定你想选择的元素在该元素层级的序号，然后再选中（序号是我随便写的代称，方便你们理解，是指该元素在该元素出现的这一层所在的位置，last-child指的最后一个，first-child指的第一个，这一点一定要弄清楚）
现在大家也能理解nth-child(序号)了吧，比如说我们现在想让第二个导航的右边框消失可以写上：

ul li:nth-child(2) a{
				border-right: none;
			}

效果如下：
在这里插入图片描述
即我们要将第二个li中的a的右边框设置为none，我们的思路是先看我们要设置的li是在这个ul子元素层级中的位置，此时我们的位置刚好也是2，所以我们写上如上代码即可实现。如果现在第二个li前面有span或者其他元素，那么我们的序号应该要变成3而不是2。应该写成ul li:nth-child(3) a
写这个选择器的时候，思路是先看该元素在这一层元素中的排名（序号）例如：

<ul>
				<li><span></span><span></span></li>
				<li></li>
				<li></li>
				<li></li>
				<span></span>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<span></span>
			</ul>

此时我们要找到第二个span。我们不能写ul span:firs-childt而是要写ul span:nth-child(5)才能选择该span。为什么勒，思路如下：
首先我们要选择的是span，那我们可以写ul span，接着我们看我们想选择的span在它所在的这一层级中的节点顺序，从上往下数是第5个（不用管子级，只需要数同级的，忽略第一个li中的span）所以我们就可以在ul span 后面加上:nth-child(5) 就可以选中第二个出现的span了。此时问题来了，如果我们在上面代码的第一个li中的span后面再加4个span，是否会选中第一个li中的第5个span勒？希望大家自主思考…（答案是会）
大概就是这样，简单的介绍下，还有不懂的可以留言。

李小白cc

关注

5
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
css伪类选择器之first-child,last-child,nth-child()

今天没上班，脑袋不太清晰，就简单给小白们讲一个很实用的css伪类选择器，这个在你们写导航或者其他列表类的css时特别实用，而且利于后期维护。这个选择器就是元素:fist-child / last-child / nth-child(子节点序号)例如此时我们需要写一个一级导航：&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt;...
复制链接

扫一扫