马富天PHP博客

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

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

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

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

直接看下面的页面代码:

  1. <!DOCTYPE>
  2. <html>
  3. 	<head>
  4. 		<title>介绍3个CSS中很常用的结构伪类</title>
  5. 		<meta charset = "utf-8" />
  6. 		<style type="text/css">					
  7. 			*{
  8. 				margin:0;
  9. 				padding:0;
  10. 				font-size:12px;
  11. 			}
  12. 			p{line-height:30px;float:left;width:100%;}
  13. 			ul{margin:0;display:block;}
  14. 			ul li{float:left;border:1px solid red;border-right:0;min-width:100px;text-align:center;line-height:30px;padding:0 10px;}
  15. 			ul li:first-child{border-top-left-radius:4px;border-bottom-left-radius:4px;}
  16. 			ul li:last-child{border-top-right-radius:4px;border-bottom-right-radius:4px;border-right:1px solid red;}
  17. 			ul li:nth-child(1){background-color:#CCC;}
  18. 			table{width:300px;border-collapse:collapse;text-align:center;}
  19. 			table tr{}
  20. 			table tr td{line-height:30px;color:#FFF;border:1px solid #D8450B;}
  21. 			table tr:first-child td{border-top-left-radius:4px;border-top-right-radius:4px;}
  22. 			table tr:last-child td{border-bottom-left-radius:4px;border-bottom-right-radius:4px;}
  23. 			table tr:nth-child(2n+1) td{background-color:#999;}
  24. 			table tr:nth-child(2n) td{background-color:#CCC;}
  25. 		</style>		
  26. 	</head>
  27. 	<body>
  28. 		<p>:first-child、:last-child和:nth-child()的使用如下:</p>		
  29. 		<ul>
  30. 			<li>首页</li>
  31. 			<li>男装</li>
  32. 			<li>女装</li>
  33. 			<li>外套</li>
  34. 			<li>鞋子</li>
  35. 		</ul>
  36. 		<p>:nth-child()的使用如下:</p>		
  37. 		<table cellspacing="0" cellpadding="0">
  38. 			<tr><td>第一行</td></tr>
  39. 			<tr><td>第二行</td></tr>
  40. 			<tr><td>第三行</td></tr>
  41. 			<tr><td>第四行</td></tr>
  42. 			<tr><td>第五行</td></tr>
  43. 			<tr><td>第六行</td></tr>
  44. 			<tr><td>第七行</td></tr>
  45. 		</table>
  46. 	</body>	
  47. </html>
请输入图片名称

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

版权归 马富天PHP博客 所有

本文标题:《介绍3个CSS中很常用的结构伪类》

本文链接地址:http://www.mafutian.net/95.html

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

1

0

上一篇《 数据库SQL语句查询指定时间段内的数据 》 下一篇《 网页中透明度四种不同的样式(兼容性) 》
分享到:

暂无评论

评论审核未开启
表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情
验证码