nth-child (2n) CSS nach versteckten tr

Question

Ich habe eine Tabelle sieht so aus (unten) nach der Verwendung von CSS nth-Kind (2n).

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

Nachdem einige auf der vID versteckt tun, ID, MO_Sub tr

<tr style="display:none"> 

Die Tabelle sieht wie folgt aus jetzt mit backgroung auf "MO" und "MODEL" weiter unten.

Ich habe Somthing getan wie (unten) und es scheint nicht zu funktionieren.

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

Wer hat irgendeine Idee, die CSS nach dem versteckten tr anwendet? Danke für jede Hilfe! =)

EDIT: add Schnipsel

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>

Ergebnis für das Snippet sollte wie folgt aussehen (siehe unten)

Answer 1

Das n-te Kind Selektor. wählt nur Kinder aus, die das n-te Kind des Elternteils sind. In Ihrem Fall wählt es table.children [n] so, dass n gerade ist. Counterintuitiv stimmt es nicht mit den geraden Werten der gefilterten Ergebnisse überein. Hover-Problem, könnte man hinzufügen:

das beheben nicht (: hover) mit dem ersten CSS-Selektor, aber dies alles nicht beheben.

Ich denke this Frage und this Frage sind beide Fragen, die sich mit dem gleichen Problem befassen.

könnte besser sein, JavaScript zu verwenden, in diesem Fall.