隐藏tr

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？ 谢谢你的帮助！ =）

编辑：添加代码段

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。