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

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

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

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

直接看下面的页面代码：

<!DOCTYPE>

<html>

	<head>

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

		<meta charset = "utf-8" />

		<style type="text/css">

*{

				margin:0;

				padding:0;

				font-size:12px;

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

			ul{margin:0;display:block;}

			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{}

			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;}

		</style>

	</head>

	<body>

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

		<ul>

			<li>首页</li>

			<li>男装</li>

			<li>女装</li>

			<li>外套</li>

			<li>鞋子</li>

		</ul>

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

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

			<tr><td>第一行</td></tr>

			<tr><td>第二行</td></tr>

			<tr><td>第三行</td></tr>

			<tr><td>第四行</td></tr>

			<tr><td>第五行</td></tr>

			<tr><td>第六行</td></tr>

			<tr><td>第七行</td></tr>

		</table>

	</body>

</html>

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

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

顶1

踩0