0

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

这是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");
4

2 回答 2

1

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

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

<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;        
}
于 2012-11-26T10:33:19.753 回答
1

您现在在 body 标签内有您的样式，例如：

<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>标签一样，因为你没有告诉浏览器它是一种样式

于 2012-11-26T10:33:32.430 回答