Question

在网页中，我们有一个嵌套在另一个表中的表。在我们的CSS类中，first-child用于为第一行提供蓝色背景。如何防止嵌套表继承此蓝色背景。

另请注意，我无法更改原始样式。

这是JSFiddle：https://jsfiddle.net/a0muwsk1/

最后一个CSS块.Main table table td是一次尝试覆盖第一个孩子的样式......它没有用。

以下是小提琴页面中的相同代码：

HTML：

<table class="Main">
    <tr>
        <td>This</td>
        <td>is</td>
        <td>first</td>
        <td>child</td>
    </tr>
    <tr>
        <td>A</td>
        <td>Regular</td>
        <td>Row</td>
        <td>
            <table>
                <tr>
                    <td>Nested</td>
                    <td>first</td>
                    <td>child</td>
                </tr>
                <tr>
                    <td>Nested</td>
                    <td>Table</td>
                    <td>Row</td>
                </tr>
            </table>
        </td>        
    </tr>
</table>

CSS：

.Main table
{
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
}

.Main tr:first-child td
{
    background-color: blue;
    text-align: center;
    border-width: 0px 0px 1px 1px;
    font-family: Arial;
    font-weight: bold;
    color: white;
}

.Main td
{
    border: 1px solid black;
    text-align: center;
    font-family: Arial;
    color: black;
}

.Main table table td
{
    border: 1px solid black;
    text-align: center;
    font-family: Arial;
    color: black;
}

Answer 1

您可以使用直接子选择器。 .element > .childElement

所以你的CSS看起来像这样

.Main > tbody > tr:first-child td
{
    background-color: blue;
    text-align: center;
    border-width: 0px 0px 1px 1px;
    font-family: Arial;
    font-weight: bold;
    color: white;
}

这是JSFiddle：https://jsfiddle.net/a0muwsk1/3/

修改

我忘记了一些桌上魔法。浏览器会向tbody元素隐式添加table元素。这个答案解释了有关浏览器魔力的更多信Why doesn't table > tr > td work when using the child selector?

Answer 2

你很接近，但你的尝试使用

.Main table table td

指的是表格内的表格中的表格 - 一个嵌套级别太多。你打算写：

.Main table td

然而，这条规则的特异性低于现有的

.Main tr:first-child td

要避免此问题，您可以将其编写为与原始规则平行的方式，包括tr:first-child部分：

.Main table tr:first-child td

具有更高的特异性。请参阅此特异性计算器：http://specificity.keegan.st/

这用英语说的

但是如果td位于tr:first-child内的table内，.Main位于blue（顶级表）内，然后不应用之前的规则get_permalink，而是将其设为透明或其他内容。

小提琴：https://jsfiddle.net/torazaburo/a0muwsk1/6/

用另一个类

2 个答案: