删除不带样式的选择器会导致问题(包括 strping 表的标题)

为什么删除没有样式的选择器包括条带化表的标题？删除空选择器如何影响任何事情？

这是 css：

<body topmargin="0" leftmargin="0" rightmargin="0" bottommargin="0">
TABLE.spreadsheet //if we delete this selector  useless header becomes striped  too
{   
} //this selector seems useless at all

TABLE.spreadsheet TH
{
    background: #ccc;
    padding: 0px 3px;
    text-align: center;
    vertical-align: text-top;
}
TABLE.spreadsheet TD
{
    text-align: center;
    vertical-align: text-top;
    padding: 0px 3px;
    font-size: 14px;        
}
TABLE.spreadsheet .odd
{
  background-color: #ffefd5;        
}

这是表格：

<table class="spreadsheet" cellspacing = "0">
        <tr>
           <th></th>
           <th>Email Address</th>
           <th>First Name</th>
           <th>Last Name</th>
           <th>Date</th>
           <th>Phone</th>
           <th>Action</th>          
        </tr>
        <tr>            
                                                    <td><input type="checkbox" name="bulk_select[]" id="bulk_select" value="2449831" class="bulk_select"></td>  
                                                        <td>test@gmail.com</td>
                                                        <td></td>
                                                        <td></td>
                                                        <td></td>
                                                        <td></td>

                <td>                        <a href="/lists/edit-subscriber?id=2449831">edit</a>&nbsp;&nbsp;&nbsp;
                    <a href="/lists/delete-subscriber?id=2449831" class="del_subscriber">delete</a></td>                            
            </tr>
                    <tr>            
                                                            <td><input type="checkbox" name="bulk_select[]" id="bulk_select" value="2449880" class="bulk_select"></td>  
                                                        <td>test48@gmail.com</td>
                                                        <td>Mark</td>
                                                        <td>Johnson</td>
                                                        <td></td>
                                                        <td></td>

                <td>                        <a href="/lists/edit-subscriber?id=2449880">edit</a>&nbsp;&nbsp;&nbsp;
                    <a href="/lists/delete-subscriber?id=2449880" class="del_subscriber">delete</a></td>                            
            </tr>
                    <tr>            
                                                            <td><input type="checkbox" name="bulk_select[]" id="bulk_select" value="2449881" class="bulk_select"></td>  
                                                        <td>test49@gmail.com</td>
                                                        <td>Chad</td>
                                                        <td>Davis</td>
                                                        <td></td>
                                                        <td></td>

                <td>                        <a href="/lists/edit-subscriber?id=2449881">edit</a>&nbsp;&nbsp;&nbsp;
                    <a href="/lists/delete-subscriber?id=2449881" class="del_subscriber">delete</a></td>                            
            </tr>
</table>

JavaScript到条带化表：

    $("table.spreadsheet tr:nth-child(odd)").addClass("odd");

您此刻的 body tag 中有您的样式，例如：

<body topmargin="0" leftmargin="0" rightmargin="0" bottommargin="0">
TABLE.spreadsheet  {   
}

它们应该位于<style>标签内，如下所示：

<body topmargin="0" leftmargin="0" rightmargin="0" bottommargin="0">
<style>
TABLE.spreadsheet  {   
} 
...
</style>

我最好的猜测是，如果你删除它，第一个选择器破坏它的原因是因为它的行为就像<style>标签，因为你没有告诉浏览器它是一种风格

我不确定我是否完全理解您的问题，但是如果我这样做，您是否要将"奇数"类添加到不在表格标题中的表格单元格中？

如果是这样，请执行以下操作：

<table>
 <thead>
  <tr>
   <th></th>
   <th></th>
  </tr>
 </head>
 <tbody>
  <tr>
   <td></td>
   <td></td>
  </tr>
 </tbody>
</table>
$("table.spreadsheet tbody tr:nth-child(odd)").addClass("odd");

此外，我建议从 BODY 元素中删除这些边距标签并对这些标签使用 CSS。

此外，您应该将CSS移动到单独的样式表中，而不是将其放在BODY标签中。如果您必须将其放在页面上，请将其放在 STYLE 标签内的 HEAD 标签中。

最后，取而代之的是：

TABLE.spreadsheet .odd
{
 background-color: #ffefd5;        
}

我会这样做：

.odd
{
 background:#ffefd5;        
}

相关内容

最新更新

热门标签：