html table奇偶行颜色设置

最新推荐文章于 2024-03-13 15:52:15 发布

小菜菜1223

最新推荐文章于 2024-03-13 15:52:15 发布

阅读量3.5k

点赞数

分类专栏： html

html 专栏收录该内容

10 篇文章

订阅专栏

本文介绍 CSS 中 :nth-child() 选择器的使用方法，通过实例展示了如何利用该选择器为表格的奇偶行设置不同的背景颜色，并单独设置第一列的背景颜色。:nth-child() 选择器能根据元素在其父元素中的位置进行样式定制，适用于各种布局需求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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

效果:

<!DOCTYPE html>
<html>
   <head>
        <style type="text/css"> 
            table{
                height: 200px;
                width:400px;
                border:2px solid  green;
            }
            
            td{
                border:1px solid;
            }
            
            tr:nth-child(2n){
                background:#00CCCC;
            }
            
            tr td:nth-child(1){
                background:#FFCCCC;
            }
        </style>  
    </head> 
    <body>
        <table>
            <tr>
                <td>1</td> <td>2</td> <td>3</td>
            </tr>
            <tr>
                <td>1</td> <td>2</td> <td>3</td>
            </tr>
            <tr>
                <td>1</td> <td>2</td> <td>3</td>
            </tr>
            <tr>
                <td>1</td> <td>2</td> <td>3</td>
            </tr>
        </table>
    </body>
</html>