4

我有以下 CSS 样式以正确格式显示表格数据，但我想以不同颜色显示表格标题 (th) 的备用背景...

我如何仅在 CSS 下进行修改以实现相同的效果，即每个 TH3、TH5 都应该有蓝色背景（第一个 TH1 除外 - 默认背景为红色），而 TH2、TH4、TH6 应该有黄色背景。

我已经尝试过第 n 个子选择器，并且在某处我读到过 th+th 两种方式都不起作用。

 <style type="text/css">
    table {
           /*...all table attributes like fontsize etc*/
            font-size:11px;
            color:#333333;                
    }
    table th {
            /*...all th attributes like padding etc*/
            background-color:#d4e3e5;
            padding: 8px;
    }
    table td {
            /*...all td attributes like padding etc*/
            padding: 8px;
    }
    </style>

感谢所有响应，但第 n 个子选择器不起作用，我已经尝试过了。有没有什么基本的方法来修改 CSS 并达到相同的效果？

4

3 回答 3

1

小提琴

第 n 个孩子正在工作。

 th:nth-child(odd) {
     background-color:red; // Replace it with your desired color
 }

 th:nth-child(even) {
     background-color: yellow;
 }

如果您还有问题，请发布您的 HTML 和 CSS。

于 2015-02-19T04:51:52.780 回答
0

你也可以试试这个

table th:odd {
    background-color:#000; //Replace it with your desired color
}

table th:odd {
    background-color:#f00; //Replace it with your desired color
}

或者您可以尝试选择第 n 个元素。

th:nth-child(n) {
    background-color:red; // Replace it with your desired color
}
于 2015-02-19T04:55:47.043 回答
0

尝试这个。

th:nth-child(odd) { 
    background-color:blue; 
}

th:nth-child(even) {
     background-color:yellow; 
}


<!DOCTYPE html>
<html>
<head>
    <style>
        th:nth-child(odd){ background-color:blue; }
        th:nth-child(even){ background-color:yellow; }
    </style>
</head>
<body>
    <table>
        <tr>
            <th>heading</th>
            <th>heading1</th>
        </tr>
        <tr>
            <td>xxx</td>
            <td>yyy</td>
        </tr>
        <tr>
            <td>xxx1</td>
            <td>yyy1</td>
        </tr>
    </table>
</body>
</html>

于 2015-02-19T04:49:09.793 回答