隐藏 tr 后的 nth-child(2n) CSS

Question

在使用 css nth-child(2n) 后，我的表格如下所示。

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

在vID,ID,MO_Sub tr上做了一些隐藏

<tr style="display:none">

现在的表格如下所示，背景为“MO”和“MODEL”。

我做了类似（如下）的事情，但它似乎不起作用。

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

有人知道在隐藏 tr 之后应用 css 吗？ 感谢您的帮助！ =)

编辑：添加 sn-p

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>

sn-p 的结果应该如下所示。（下）

Answer 1

第 n 个子选择器仅选择作为父项的第 n 个子项的子项。 在您的情况下，它选择 table.children[n] 使得 n 是偶数。与直觉相反，它与过滤结果的偶数值不匹配。

要解决 :hover 问题，您可以将 :not(:hover) 添加到第一个 css 选择器，但这并不能解决所有问题。

我认为this question 和this question 都是处理同一个问题的问题。

在这种情况下，使用 JavaScript 可能会更好。