html - "Inner"CSS 未覆盖 "Outer"CSS

Question

我有一些嵌套表，其中有一个外部容器表，两个列表嵌套在外部表中，然后各种表在列中相互堆叠。这是相关的 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。

如有任何建议，我们将不胜感激。

Answer 1

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

特异性得分是基于

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

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

   • .cell td 包含类选择器和元素选择器
   • .image 包含类选择器但没有元素选择器

因此，第一条规则更具体。