Question

假设以下代码：

<style>
    .child      {border:0px solid #000; border-spacing:0px;}
    .child td   {border:0px solid #000; }
    .child th   {border:0px solid #000; }

    .parent     {border:1px solid #000; border-spacing:0px;}
    .parent td  {border:1px solid #000; }
    .parent th  {border:1px solid #000; }
</style>


<table class="parent">
    <tr>
        <th>title</th>
    </tr>
    <tr>
        <td>stuff</td>
    </tr>
    <tr>
        <td>
            <table class="child">
                <tr>
                    <th>Name: </th>
                    <td><input name="Name" value="stuff"></td>
                </tr>
            </table>
        </td>
    </tr>
</table>

我对CSS继承的理解是子表中的元素没有边框，因为它们将查找最接近样式的父元素，并固有该类的特定内容。但是，在此示例中，子表在th和td元素上显示边框（尽管不在表本身上）。这表明子类正在为表正常工作，但它不会传播给子元素。

这是打算吗？解决这个问题的正确方法是什么？

Answer 1

如果td课程，您的CSS将定位所有th和parent。这是完全预期的行为。

如果您没有定位特定的class，那么对于任何类，都会应用最相关的css - 这会出现在样式定义中找到的最后一个最适用的规则，同样适用...

你提到的要做的事情，可以通过定位类的直接后代来实现，如下所示：

    .parent {
        border:1px solid #000;
        border-spacing:0px;
    }
    .parent > td { /* > will ensure only td of parent class is targeted */
        border:1px solid #000;
    }
    .parent > th {
        border:1px solid #000;
    }

fiddle with direct descendant

demo of orginal

<强>更新

要在评论中回答您的查询，请更改CSS声明的顺序

Fiddle Demo

CSS 更改颜色以便更好地理解

.parent {
    border:1px solid #000;
    border-spacing:0px;
}
.parent tr > td {
    border:1px solid red;
}
.parent tr > th {
    border:1px solid yellow;
}
.child {
    border:1px solid blue;
    border-spacing:0px;
}
.child tr > td {
    border:0px solid #000;
}
.child tr > th {
    border:0px solid #000;
}

Answer 2

两个选择器都具有相同的权重，因此应用样式表中读取的最后一个：

http://www.w3.org/TR/CSS2/cascade.html#specificity

对你来说，有：

.class td { ...}
.class td { ...} /* wich overwrite previous rule */

您需要增加选择器的重量或特性：）

http://www.w3.org/TR/CSS2/selector.html

可能是：

.parent .child      {border:0px solid #000; border-spacing:0px;}
table .child td   {border:0px solid #000; }
table table.child th   {border:0px solid #000; }
table.child      {border:0px solid #000; border-spacing:0px;}
table td > .child td   {border:0px solid #000; }
.child > th   {border:0px solid #000; }
table.parent .child      {border:0px solid #000; border-spacing:0px;}
table.parent .child td   {border:0px solid #000; }
td > .child th   {border:0px solid #000; }

为什么父类重写子类

2 个答案: