nth-child（2n）隱藏tr後的CSS

Question

使用css nth-child（2n）後，我有一個如下所示的表（下面）。

tr:nth-child(2n) {background-color: #f0f3f5;} 

做一些隱藏的VID，ID，MO_Sub TR

<tr style="display:none"> 

表格現在看起來是這樣的下方，backgroung的 「MO」 和 「模式」 之後。

我已經做了類似的財產以後（如下圖），它似乎並沒有工作。

tr:not(.isotope-hidden):nth-child(2n) 

任何人有任何想法應用CSS隱藏TR後？ 感謝您的幫助！ =）

編輯：添加片段

tr:not([style*="display:none"]):nth-child(2n){ 
 
    background-color: #f0f3f5; 
 
} 
 

 
tr:hover{ 
 

 
    background-color: cadetblue; 
 

 
}

<table id="form_tb"> 
 
        <tr style="display:none"> 
 
         <td><label>vvID :</label></td> 
 
         <td><input type="text" name="vvID" placeholder="vvID" readonly></td> 
 
        </tr> 
 
        <tr style="display:none"> 
 
         <td><label>vID :</label></td> 
 
         <td><input type="text" name="vID" placeholder="vID" readonly></td> 
 
        </tr> 
 
        <tr style="display:none"> 
 
         <td><label>vID_sub :</label></td> 
 
         <td><input type="text" name="vID_sub" placeholder="vID_sub" readonly></td> 
 
        </tr> 
 
        <tr style="display:none"> 
 
         <td><label>ST :</label></td> 
 
         <td><input type="text" name="Station" placeholder="Station" readonly></td> 
 
        </tr> 
 
        <tr style="display:none"> 
 
         <td><label>SortID :</label></td> 
 
         <td><input type="text" name="SortID" placeholder="SortID" readonly></td> 
 
        </tr> 
 
        <tr> 
 
         <td><label>MO :</label></td> 
 
         <td data-key='MO'><input id=MO type="text" name="MO" placeholder="MO" readonly></td> 
 
        </tr> 
 
        <tr style="display:none"> 
 
         <td><label>MO_Sub :</label></td> 
 
         <td><input type="text" name="MO_Sub" placeholder="MO_Sub" readonly></td> 
 
        </tr> 
 
        <tr> 
 
         <td><label>PART :</label></td> 
 
         <td data-key='text'><input type="text" name="Part_number" placeholder="PART" readonly></td> 
 
        </tr> 
 
        <tr> 
 
         <td><label>MODEL :</label></td> 
 
         <td><input type="text" name="Model" placeholder="MODEL" readonly></td> 
 
        </tr> 
 
        <tr style="display:none"> 
 
         <td><label>Class :</label></td> 
 
         <td><input type="text" name="Product_Class" placeholder="Class" readonly></td> 
 
        </tr> 
 
        <tr> 
 
         <td><label>Side :</label></td> 
 
         <td><input type="text" name="Side" placeholder="Side" readonly></td> 
 
        </tr> 
 
        
 
       </table>

（下）結果的片段應該是這樣的

Answer 1

第n個孩子選擇。僅選擇父母的第n個孩子的孩子。 在你的情況下，它選擇table.children [n]，使得n是偶數。反直覺地，它不匹配過濾結果的偶數值。

要修復：懸停問題，可以將：not（：hover）添加到第一個css選擇器，但這並不能解決所有問題。

我認爲this問題和this問題都是處理同一問題的問題。

在這種情況下使用JavaScript可能會更好。