2

1 つの外側のコンテナー テーブル、外側のテーブルにネストされた 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 に答える