“内部”CSS不覆盖“外部”CSS

我有一些嵌套的表，其中有一个外部容器表，两个列表嵌套在外部表中，然后各列在列中堆叠在一起。下面是相关HTML：“内部”CSS不覆盖“外部”CSS

<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。

任何意见表示赞赏。

问候。

来源

2012-07-12 Kevin

订单也很重要...在你的小提琴上为你工作。 – tigertrussell 2012-07-12 18:50:17

你看错了。父元素上的填充不能被子元素覆盖。表单元格将有2px的填充，并且图像将没有。 – 2012-07-12 18:50:19

@tigertrussell：非常感谢。 – Kevin 2012-07-12 18:56:05

特异性并不取决于元素的“深度”，而仅仅取决于选择器的明确程度。

特异性得分基于

ID选择器的数目
否则，类/属性选择器的数目
否则，元件选择器的数目
- .cell td包含一个类选择器和一个元素选择器
- .image含有类选择并没有元素选择

所以，第一个规则是更具体的。

来源

2012-07-12 18:57:57 Gareth

这很清楚。谢谢。但是，这并不意味着将.image的CSS更改为“.cell td .image”应该以我希望的方式工作？ – Kevin 2012-07-12 19:10:03

是的，确实如此。除非你有其他的CSS受到阻碍。例如，在Chrome中，如果您通过右键单击某个元素来“检查”某个元素，则右侧面板将列出与该元素匹配的所有CSS规则，并且最具体的规则位于顶部 – Gareth 2012-07-13 11:34:31

“内部”CSS不覆盖“外部”CSS

回答

相关问题