“内部" CSS不会覆盖“外部"的CSS [英] "Inner" CSS Not Overriding "Outer" CSS

问题描述

我有一些嵌套表，其中有一个外部容器表，在外部表中嵌套了两个列表，然后在表中彼此堆叠各种表.这是相关的HTML:

I have some nested tables where there is one outer, container table, two column tables nested in the outer table, and then various tables stacked on each other in the columns. Here is the relevant 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.

My problem is that the image tds have a padding of 2px. My understanding was that the CSS for .image -- being more specific -- should override the CSS for ".cell td".

任何建议都值得赞赏.

推荐答案

特异性不是由元素的深度"决定的，而是由选择器的明确性决定的.

Specificity isn't determined by how "deep" the elements are, but just by how explicit the selectors are.

特异性得分基于

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

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

1. the number of ID selectors
2. otherwise, the number of class/attribute selectors

3. otherwise, the number of element selectors

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

• .cell td contains a class selector and an element selector
• .image contains a class selector and no element selectors

因此，第一个规则更具体.

So, the first rule is more specific.

这篇关于“内部" CSS不会覆盖“外部"的CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！