html - 使用 :nth-child(x) CSS 隐藏定价框

Question

我在这个页面上有一些定价框:

https://www.shiftdivorceguide.com/pricing-plan/

以下代码隐藏了最后一个框:

.price-view-default:last-child {display:none;} 

下面的代码是我假设隐藏倒数第二个框:

.price-view-default:nth-child(4) {display:none;}

但是，上面的代码不起作用。有谁知道如何使用 CSS 隐藏框？

.price-view-default:last-child {display:none;} 

.price-view-default:nth-child(4) {display:none;}

<div class="page-inner-container lp_hide_general_plans " id="select_style" data-style="vertical_view_1">    <div class="col-md-4 price-view-default 685  ">
                <div class="lp-price-main lp-border-radius-8 lp-border text-center">                
                    <div class="lp-title" style="background-color: #2caae0;">
                        <div class="lp-plane-top-wrape">
                            <a>Monthly Listing</a>
                            <p>$39</p>
                            <span class="package-type">Per Listing</span><br><br>
                        </div>
                    </div>
                    <!--Bottom plan section -->                 
                </div>
    </div>  <div class="col-md-4 price-view-default 687 featured-plan ">
                <div class="lp-price-main lp-border-radius-8 lp-border text-center">

                    <div class="lp-title" style="background-color: #963693;">
                        <div class="lp-plane-top-wrape">
                            <a>Quarterly Listing</a>
                            <p>$99</p>
                            <span class="package-type">Per Listing</span><br><br>
                        </div>
                    </div>
                    <!--Bottom plan section -->
                </div>
    </div>  <div class="col-md-4 price-view-default 686  ">
                <div class="lp-price-main lp-border-radius-8 lp-border text-center">                
                    <div class="lp-title" style="background-color: #58ee9e;">
                        <div class="lp-plane-top-wrape">
                            <a>Yearly Listing</a>
                            <p>$329</p>
                            <span class="package-type">Per Listing</span><br><br>
                        </div>
                    </div>
                    <!--Bottom plan section -->
                </div>
    </div>  <div class="col-md-4 price-view-default 1765  ">
                <div class="lp-price-main lp-border-radius-8 lp-border text-center">                        
                    <div class="lp-title" style="background-color: #ff8000;">
                        <div class="lp-plane-top-wrape">
                            <a>TEST Listing</a>
                            <p>$1</p>
                            <span class="package-type">Per Listing</span><br><br>
                        </div>
                    </div>              
                    <!--Bottom plan section -->
                </div>
    </div>  <div class="col-md-4 price-view-default 119  ">
                <div class="lp-price-main lp-border-radius-8 lp-border text-center">                        
                    <div class="lp-title" style="background-color: #58ee9e;">
                        <div class="lp-plane-top-wrape">
                            <a>Basic Legacy Listing<br>Limited Time Only!</a>
                            <p>Free</p>
                            <span class="package-type">Per Listing</span><br><br>
                        </div>
                    </div>
                    <!--Bottom plan section -->
        </div>
    </div>
</div>

Answer 1

您正在寻找 :nth-last-child 选择器。这与 :nth-child 相同，但倒数。

https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-last-child

.price-view-default:nth-last-child(2)