zoukankan      html  css  js  c++  java
  • html table奇偶行颜色设置 (CSS选择器)

    
    

    :nth-child(n) 选择器匹配属于其父元素的第 N 个子元素,不论元素的类型。n 可以是数字、关键词或公式。

    下面的例子, 设置表格的奇偶行背景颜色不同;单独设置表格的第1列背景颜色不同。

     1 <!DOCTYPE html>
     2 <html>
     3    <head>
     4         <style type="text/css"> 
     5             table{
     6                 height: 200px;
     7                 width:400px;
     8                 border:2px solid  green;
     9             }
    10             
    11             td{
    12                 border:1px solid;
    13             }
    14             
    15             tr:nth-child(2n){
    16                 background:#00CCCC;
    17             }
    18             
    19             tr td:nth-child(1){
    20                 background:#FFCCCC;
    21             }
    22         </style>  
    23     </head> 
    24     <body>
    25         <table>
    26             <tr>
    27                 <td>1</td> <td>2</td> <td>3</td>
    28             </tr>
    29             <tr>
    30                 <td>1</td> <td>2</td> <td>3</td>
    31             </tr>
    32             <tr>
    33                 <td>1</td> <td>2</td> <td>3</td>
    34             </tr>
    35             <tr>
    36                 <td>1</td> <td>2</td> <td>3</td>
    37             </tr>
    38         </table>
    39     </body>
    40 </html>

    效果:

    可以参考:

    http://www.w3school.com.cn/cssref/selector_nth-child.asp

  • 相关阅读:
    poj2138 Travel Games
    [TJOI2013]松鼠聚会
    [HNOI2013]切糕
    CSS应用
    列表数据显示+分页
    SESSION的应用
    JS中正规表达式的用法以及常用的方法总结
    CSS 定位 (Positioning)
    CSS 边距
    选项卡应用
  • 原文地址:https://www.cnblogs.com/xudong-bupt/p/6080525.html
Copyright © 2011-2022 走看看