CSS3:nth-child( )伪类选择器定义表格样式

悲酥清风
悲酥清风
悲酥清风
826
文章
55
评论
CSS1 3,812,3122阅读模式

在很多英文网站上发现很多有意思的表格，加之高一（3）班有部分孩子对网页兴趣很高，所以搞了个简单的教程。

表格样式：

CSS3:nth-child( )伪类选择器定义表格样式

 

如果我们单纯用DW来做的话，效果是这样的：CSS3:nth-child( )伪类选择器定义表格样式

 

这个时候CSS3就派上用场了！

表格的源码：

  1. <table border="1">
  2. <tr>
  3. <th>Item</th>
  4. <th>Price</th>
  5. <th>Quantity</th>
  6. <th>Total</th>
  7. </tr>
  8. <tr>
  9. <td>Coffee mug</td>
  10. <td>$10.00</td>
  11. <td>5</td>
  12. <td>$50.00</td>
  13. </tr>
  14. <tr>
  15. <td>Polo shirt</td>
  16. <td>$20.00</td>
  17. <td>5</td>
  18. <td>$100.00</td>
  19. </tr>
  20. <tr>
  21. <td>Red stapler</td>
  22. <td>$9.00</td>
  23. <td>4</td>
  24. <td>$36.00</td>
  25. </tr>
  26. <tr>
  27. <td colspan="3">Subtotal</td>
  28. <td>$186.00</td>
  29. </tr>
  30. <tr>
  31. <td colspan="3">Shipping</td>
  32. <td>$12.00</td>
  33. </tr>
  34. <tr>
  35. <td colspan="3">Total Due</td>
  36. <td>$198.00</td>
  37. </tr>
  38. </table>

一、先定义表格：

  1. table{
  2.     border-collapse:collapse;/*两边框合并为一条;*/
  3.     width:600px;/*表格宽度为600;*/
  4. }
  5. th,td{border:none;}/*无边框;*/
  7. th{
  8.     background:#000;
  9.     color:#fff
  10. }/*表头黑底白文本;

二、添加表格的斑马纹：

  1. tr:nth-of-type(even){
  2.     background-color:#F3F3F3;
  3. }
  4. tr:nth-of-type(odd){
  5.     background-color:#ddd
  6. }/*斑马纹;*/

三、nth-child()伪类选择器来定义样式：

  1. td:nth-child(n+2),th:nth-child(n+2){
  2.     text-align:right;
  3. }/*对齐表格列;*/
  5. tr:last-child{
  6.     font-weight:bolder;
  7.     }/*加粗;*/
  8. td:last-child{
  9.     font-weight:bolder;
  10.     }/*加粗;*/
  11. tr:last-child td:last-child{
  12.     font-size:24px;
  13. }/*突出总计;*/
  15. tr:nth-last-child(2){
  16.     color:green;
  17.     }/*定义倒数第二子元素;*/
  19. tr:nth-last-child(-n+3) td{
  20.     text-align:right;
  21. }/*定义n值偏移;*/

知识总结：nth-child的用法

  • even 选择元素的偶数实例。
  • odd 选择元素的奇数实例。
  • a n+ b 从 a+b 实例开始选择元素的每 a 个实例。
  • a n- b 从 a-b 实例开始选择元素的每 a 个实例。
  • :nth-child 伪类是结构伪类。结构伪类允许根据无法使用简单的选择器或连结符选择的文档树中的额外信息进行选择。
下载地址

历史上的今天
12月
23
悲酥清风
  • 本文由 发表于 2014年12月23日 21:50:07
评论  1  访客  0  引用  1

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定