Question

我正在努力想出一种带有奇数/偶数样式的样式。该行将标记为奇数/偶数类，但样式需要应用于包含td / th。

样式无法直接放在行上的原因是因为将背景颜色应用于行而不是td / th会导致某些浏览器出现不一致的结果。

当我将颜色应用于td / th时，它会导致嵌套场景出现问题。

<html><head><title>Nesting</title></head><body>

<style type="text/css">
    .even td, .even th {
        background-color: #FBFCFD;
    }
    .odd td, .odd th {
        background-color: #FEFFFF;
    }
</style>

<table width="100%">
    <tr class="even">
        <th>Test</th>
        <td>Test</td>
    </tr>
    <tr class="odd">
        <th>Test</th>
        <td>Test</td>
    </tr>
    <tr class="even">
        <th>Test</th>
        <td>Test</td>
    </tr>
    <tr class="odd">
        <th>Test</th>
        <td>

            <table width="100%">
                <tr class="even">
                    <th>Test</th>
                    <td>Test</td>
                </tr>
                <tr class="odd">
                    <th>Test</th>
                    <td>Test</td>
                </tr>
                <tr class="even">
                    <th>Test</th>
                    <td>Test</td>
                </tr>
                <tr class="odd">
                    <th>Test</th>
                    <td>

                        <table width="100%">
                            <tr class="even">
                                <th>Test</th>
                                <td>Test</td>
                            </tr>
                            <tr class="odd">
                                <th>Test</th>
                                <td>Test</td>
                            </tr>
                            <tr class="even">
                                <th>Test</th>
                                <td>Test</td>
                            </tr>
                            <tr class="odd">
                                <th>Test</th>
                                <td>Test</td>
                            </tr>
                        </table>

                    </td>
                </tr>
            </table>

        </td>
    </tr>
</table>

</body></html>

如果我可以做类似以下的事情，那么理想的是，但不幸的是它在旧浏览器中有效。

<style type="text/css">
    .even > td, .even > th {
        background-color: #FBFCFD;
    }
    .odd > td, .odd > th {
        background-color: #FEFFFF;
    }
</style>

现场查看问题 - http://jsfiddle.net/fB9Db/

Answer 1

如何在css中切换均衡和赔率？

http://jsfiddle.net/fB9Db/1/

<style type="text/css">
    .even td, .even th {
        background-color: #FBFCFD;
    }
    .odd td, .odd th {
        background-color: #FEFFFF;
    }
</style>

另一件事是您可以使用红色覆盖整个表格框的背景，然后将背景颜色分配给赔率..

Answer 2

你正在为偶数/奇数td和th写css但是然后将类放在tr上。为什么呢？

尝试将css应用于正确的html元素。这对你来说可能更好。嵌套html元素时，您还必须嵌套CSS样式。

.even, td, .even table td, .even table table td, { background-color: #FFFFF; }
.odd td, .odd table td, .odd table table td { background-color: #000000; }

这应该照顾嵌套至少2层深的表。添加更多以进行更多嵌套。

Answer 3

我的建议是使用您自己发布的直接子选择器：

<style type="text/css">
    .even > td, .even > th {
        background-color: #FBFCFD;
    }
    .odd > td, .odd > th {
        background-color: #FEFFFF;
    }
</style>

浏览器对此的支持几乎是普遍的。唯一缺少的浏览器是IE6，微软和世界上许多网页都不再支持IE6。

请点击此处查看支持它的浏览器列表：

http://www.quirksmode.org/css/selectors/

What browsers support CSS #parent > .direct-child notation? (no jQuery)

CSS Odd /甚至td嵌套

3 个答案: