博主辛苦了，我要打赏银两给博主，犒劳犒劳站长。

支付宝支付

微信支付

QQ钱包

介绍3个CSS中很常用的结构伪类

学习笔记马富天 2016-05-06 16:40:27 52 0

【摘要】CSS中有3个非常有用的结构伪类，分别是：first-child、last-child、nth-child(even)或者nth-child(odd)，很实用，感觉把它用起来吧。

:first-child、:last-child、nth-child（）出现的目的就是为了尽可能的减少在标记中添加额外的类。

直接看下面的页面代码：

		<title>介绍3个CSS中很常用的结构伪类</title>

			p{line-height:30px;float:left;width:100%;}

			ul li{float:left;border:1px solid red;border-right:0;min-width:100px;text-align:center;line-height:30px;padding:0 10px;}

			ul li:first-child{border-top-left-radius:4px;border-bottom-left-radius:4px;}

			ul li:last-child{border-top-right-radius:4px;border-bottom-right-radius:4px;border-right:1px solid red;}

			ul li:nth-child(1){background-color:#CCC;}

			table{width:300px;border-collapse:collapse;text-align:center;}

			table tr td{line-height:30px;color:#FFF;border:1px solid #D8450B;}

			table tr:first-child td{border-top-left-radius:4px;border-top-right-radius:4px;}

			table tr:last-child td{border-bottom-left-radius:4px;border-bottom-right-radius:4px;}

			table tr:nth-child(2n+1) td{background-color:#999;}

			table tr:nth-child(2n) td{background-color:#CCC;}

		<p>:first-child、:last-child和:nth-child()的使用如下：</p>

		<p>:nth-child()的使用如下：</p>

		<table cellspacing="0" cellpadding="0">

效果图如上所示，是不是减少了css的类又同样实现了相同的效果呢？感觉复制一下代码试一试，给自己的网站优化一下。

转载请务必注明出处，小生将不胜感激，谢谢! 喜欢本文或觉得本文对您有帮助，请分享给您的朋友 ^_^

顶1

踩0

评论审核未开启

回复后邮件通知我