Question

我有以下内容：

＆＃13;

.defaultGrid{
    width:     100%;
}
.defaultGrid table{
    width:      100%;
}
.defaultGrid .pageBCon{
    float:                      right;
}

.defaultGrid .gridTest tr:nth-child(even) {
    background-color: #e9d5b6;
}

＆＃13;

<body>
    <div class="defaultGrid, gridTest">
        <div class="pageBCon">Pages</div>
        <table>
            <tbody>
                <tr>
                    <td>test1</td>
                    <td>test1</td>
                    <td>test1</td>
                </tr>
                <tr>
                    <td>test1</td>
                    <td>test1</td>
                    <td>test1</td>
                </tr>
                <tr>
                    <td>test1</td>
                    <td>test1</td>
                    <td>test1</td>
                </tr>
            </tbody>
        </table>
    </div>
</body>

＆＃13;

如您所见，div下的HTML元素没有得到正确的CSS？为什么呢？

Answer 1

您的代码中存在2个问题。

HTML：将多个类应用于元素时，需要使用空格而不是逗号分隔它们：

<div class="defaultGrid gridTest">

CSS ：在您的nth-child规则中，规则定义中有一个额外的空格。它应该是：

.defaultGrid.gridTest tr:nth-child(even) {
     background-color: #e9d5b6;
}

.defaultGrid .gridTest（带空格）表示grid.test的孩子为.defaultGrid。

请参阅Fiddle

Answer 2

.defaultGrid{
    width:     100%;
}
.defaultGrid table{
    width:      100%;
}
.defaultGrid .pageBCon{
    float:                      right;
}

.defaultGrid .gridTest tr:nth-child(even) {
    background-color: #e9d5b6;
}

<body>
    <div class="defaultGrid gridTest">
        <div class="pageBCon">Pages</div>
        <table>
            <tbody>
                <tr>
                    <td>test1</td>
                    <td>test1</td>
                    <td>test1</td>
                </tr>
                <tr>
                    <td>test1</td>
                    <td>test1</td>
                    <td>test1</td>
                </tr>
                <tr>
                    <td>test1</td>
                    <td>test1</td>
                    <td>test1</td>
                </tr>
            </tbody>
        </table>
    </div>
</body>

您只需要从课程中删除逗号即可。而不是<div class="defaultGrid, gridTest">做<div class="defaultGrid gridTest">

Answer 3

摆脱逗号。不要使用逗号分隔选择器类。它是css选择器中的defaultGrid.gridTest。

Answer 4

在HTML中这无效

<div class="defaultGrid, gridTest">

但要为DIV提供多个课程，你应该这样做：

<div class="defaultGrid gridTest">

为什么CSS不在div中工作？

4 个答案: