Question

对不起..我在SO中与其他答案有点混淆。

我有2张桌子，其中一个在表格内呈现。（表格中的表格）

<table class="master">
  <tr>
    <td>ID</td><td>Name</td><td>Information</td>
  </tr>
  <tr>
    <td>1</td>
    <td>John</td>
    <td>
       <table class="detail">
         <tr>
             <td>ID</td><td>Order</td>
         </tr>
         <tr>
             <td>1</td><td>CA09-WYOMING-BR</td>
         </tr>
       </table>
    </td>
  </tr>
</table>

式

<style>
    table.detail{
        border:1px solid red;
        border-collapse: collapse;
        /* etc...about 20 lines code */
    }
    table.detail td{
        border:1px solid red; 
        background:red;
        /* etc...about 20 lines code */
    }
    table.master {
        border:1px solid black;
        border-collapse: collapse;
    }
    table.master td {
        border:1px solid black;
        background:gray;
    }
</style>

由于父表CSS重写，详细信息表样式未正确呈现。我知道有！important 标记可以使子CSS样式不被覆盖，但如果CSS样式大约有20行代码我应该添加＆＃39;！important＆＃39;标记给所有人？

http://jsfiddle.net/vxdM3/

Answer 1

此处不需要!important ...颠倒你的风格顺序。在master之前放置detail表的css。您拥有它的方式是首先应用detail的css，然后应用master css覆盖为detailed设置的内容。

re-orded css fiddle

或者，如果您不想移动css，可以将选择器更新为table.master table.detail{}和table.master table.detail td{}。

updated selector fiddle

Answer 2

作为一般规则，我使用＆gt;避免无意中设置嵌套元素的样式。

.master > tr > td
{
    ....
}

实际上，因为我总是使用tbody，所以更像是：

.master > tbody > tr > td

我不喜欢惊喜，所以我尽量小心地写一些非常明确的css风格的css。当然，它有点慢，但我发现它对用户体验微不足道，我可以更快地完成工作。当然，其他人可能会采用不同的方式。

父样式CSS覆盖的子样式（不同的问题）

2 个答案: