2

我有一些嵌套表，其中有一个外部容器表，两个列表嵌套在外部表中，然后各种表在列中相互堆叠。这是相关的HTML：

<table class="outer">
    <tr>
        <td>
            <table class="column" id="left_column">
                <tr>
                    <td>
                        <table class="cell" id="t1">
                            <tr><td><asp:Literal runat="server" ID="t1r2c0" /></td><td><asp:Literal runat="server" ID="t1r2c1" /></td><td class="image"><span id="s1" runat="server"><asp:PlaceHolder ID="p1" runat="server"></asp:PlaceHolder></span></td><td><asp:Literal runat="server" ID="t1r2c3" /></td><td class="gray"><asp:Literal runat="server" ID="t1r2c4" /></td></tr>
                        </table>
                    </td>
                </tr>
                <tr>
                    <td>
                        <table class="cell" id="t2">
                        </table>
                    </td>
                </tr>
            </table>
        </td>
        <td>
            <table class="column" id="rightColumn">
                <tr>
                    <td>
                        <table class="cell" id="t3">
                        </table>
                    </td>
                </tr>
                <tr>
                    <td>
                        <table class="cell" id="t4">
                        </table>
                    </td>
                </tr>
                <tr>
                    <td>
                        <table class="cell" id="t5">
                        </table>
                    </td>
                </tr>
                <tr>
                    <td>
                        <table class="cell" id="t6">
                        </table>
                    </td>
                </tr>
                <tr>
                    <td>
                        <table class="cell" id="t7">
                        </table>
                    </td>
                </tr>
                <tr>
                    <td>
                        <table class="cell" id="t8">
                        </table>
                    </td>
                </tr>
                <tr>
                    <td>
                        <table class="messages" id="t9">
                        </table>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>

这是相关的CSS：

.cell
{
border: none;
}
.cell td
{
border-collapse: collapse;
border: 2px solid black;
text-align: center;
vertical-align: middle;
padding: 2px;
}
.image
{
padding: 0;
margin: 0;
width: 65px;
}

我的问题是图像 tds 有 2px 的填充。我的理解是 .image 的 CSS——更具体一点——应该覆盖“.cell td”的 CSS。

任何建议表示赞赏。

4

1 回答 1

2

特异性不是由元素的“深度”决定的，而是由选择器的明确程度决定的。

特异性评分基于

  1. ID 选择器的数量
  2. 否则，类/属性选择器的数量

  3. 否则，元素选择器的数量

    • .cell td包含一个类选择器和一个元素选择器
    • .image包含一个类选择器并且没有元素选择器

所以，第一条规则更具体。

于 2012-07-12T18:57:57.360 回答