代码之家  ›  专栏  ›  技术社区  ›  trouselife

为表格行排序CSS类,为什么类背景颜色不覆盖其他定义的CSS tr颜色?

  •  1
  • trouselife  · 技术社区  · 6 年前

    我有一张带班级报告表的表格:

    <table class='report-table'>
    <thead>
      <th>Header</th>
     </thead>
    
     <tbody>
     <tr >
      <td>stuff</td>
     </tr>
     </tbody>
    
     </table>
    

    我定义了自己的颜色(奇怪的配色方案——但这与我在表格主体中呈现的django表单集有关)

    css:

    table.report-table {
      font-family:arial;
        background-color: #DCDCDC;
      margin: 10px 5px 15px 15px;
      font-size: 10pt;
      text-align: center;
        width: 1500px;
    }
    
    table.report-table thead {
      font-family: arial;
        border-top: 2px solid black;
        border-bottom: 2px solid black;
      background-color: #4CAF50;
      color: black;
        padding: 100px 100px 100px 100px;
      font-size: 10.5pt;
      font-weight: lighter;
      text-align: center;
    
    }
    
    .report-table tbody tr:nth-child(3n+1) td {
        background-color: #C0C0C0;
    }
    
    .report-table tbody tr:nth-child(3n+2) td {
        background-color: white;
    }
    
    .report-table tbody tr:nth-child(6n+1) td {
        background-color: #d9ffcc;
    }
    
    .report-table tbody tr:nth-last-child(3) td {
            border-bottom: 1px solid grey;
    }
    

    这非常适合我上面的桌子,但有时当我想使用这张桌子时,我想把行涂成橙色。我想把这个添加到我的css文件中:

    .orange-row td {
        background-color: orange; !important;
        text-align:center;
    }
    

    然后当我用我的桌子做这个时:

    <table class='report-table'>
    <thead>
      <th>Header</th>
     </thead>
    
     <tbody>
     <tr class='orange-row'>
      <td>stuff</td>
     </tr>
     </tbody>
    
     </table>
    

    那将是橙色的一排。。。但事实并非如此?为什么不把它推到“前面”呢?我怎样才能让一个类给行加上橙色的背景色呢?

    1 回复  |  直到 6 年前
        1
  •  2
  •   Mickel    6 年前

    这是 层叠 ( s 泰勒 s 注意)CSS的本质在这里起作用。尤其是 specificity .

    简言之,你可以通过更具体的方式让它发挥作用。

    .report-table tbody tr.orange-row td {
        background-color: orange;
    }
    

    此外,你的邮件中有一个拼写错误 background-color 所有物取代第一个;答:也可以。