Question

我是HTML和CSS的新手。

我已经为table元素添加了一个CSS类。然后我在子表中添加了一个子表。问题是父表CSS类也会影响子表。我不希望这种情况发生。

如何确保应用于父表的CSS不会影响子表？

我的Css如下：

.gtable {
    width: 100%;
}
.gtable th {
    padding: 5px 10px;
    text-align: left;
}
.gtableTH {
    text-align: center;
}
.gtable thead tr {
    border: 1px solid #CCCCCC;
    color: #333333;
}
.gtable thead th {
    background: none repeat scroll 0 0 #C0C0C0;
}
.gtable tbody tr:hover td {
    background-color: #FFFAE3;
}
.gtable td {
    padding: 5px 10px;
}
.gtable tbody tr td {
    border-bottom: 1px solid #EEEEEE;
}
.gtable tbody tr:nth-child(2n+1) .gtable thead th {
    background: -moz-linear-gradient(#FFFFFF, #EFEFEF) repeat scroll 0 0 transparent;
}

和我的HTML：

<table class="gtable">

                        <thead>

                            <tr>

                                <th>Drop Down Label</th>
                                <th>Drop Down Values</th>
                            </tr>

                        </thead>

                        <tbody class="ui-sortable">

                            <tr>

                                <td>Category 1</td>

                                <td>
                                    <table>
                                        <tbody class="ui-sortable"><tr>
                                            <td>
                                                Complaint
                                            </td>
                                            </tr>
                                            <tr>
                                            <td>
                                                Service Request
                                            </td>
                                            </tr>
                                            <tr>
                                            <td>
                                                Enquiry
                                            </td>
                                        </tr>
                                    </tbody></table>
                                </td>

                                <td>
                                     <button class="button small" type="submit">Edit</button>
                                </td>

                            </tr>

                        </tbody>
                    </table>

Answer 1

您刚刚发布的代码中的

编辑，看起来问题是.gtable td（以及其中包含空格的其他选择器）在内部的任何位置选择td具有gtable类（包括子表）的元素。如果您只想在第一个表中选择元素，请将类直接放在这些元素上，或使用子选择器，如.gtable > tbody > tr > td。

Answer 2

使用直接子选择器> 这意味着CSS属性将仅应用于左侧选择器的直接后代。

e.g。

.box1 > img  {
     border:5px;
}

.box1中只有<img>个标签的边框为5px。如果它们在任何其他元素中，请说<a><img src=... /></a>它们将没有任何边框

将此CSS用于您的示例：

    .gtable {
        width: 100%;
    }
    .gtable > th {
        padding: 5px 10px;
        text-align: left;
    }
    .gtableTH {
        text-align: center;
    }
    .gtable > thead > tr {
        border: 1px solid #CCCCCC;
        color: #333333;
    }
    .gtable > thead > th {
        background: none repeat scroll 0 0 #C0C0C0;
    }
    .gtable > tbody > tr:hover > td {
        background-color: #FFFAE3;
    }
    .gtable > td {
        padding: 5px 10px;
    }
    .gtable > tbody > tr > td {
        border-bottom: 1px solid #EEEEEE;
    }
    .gtable > tbody > tr:nth-child(2n+1) >.gtable > thead > th {
        background: -moz-linear-gradient(#FFFFFF, #EFEFEF) repeat scroll 0 0 transparent;
    }

Answer 3

没有你的代码没有线索，但这是一个带有嵌套表的两个表的演示。一个关闭了样式：http://jsfiddle.net/jalbertbowdenii/7QWQv/

Answer 4

在你的Css中你正在使用.gtable tbody, .gtable tr, .gtable td, .gtable th，这意味着你正在将css应用于父表中的所有子节点（tr，td，th）。你应该避免它。

解决方案：
将另一个类应用于子表，如<table class="childtable"> 在你css中你需要为嵌套元素定义css为 -
.childtable tbody, .childtable tr, .childtable td, .childtable th等。

删除特定Html元素的CSS类

4 个答案: