时间戳

首页 > 解决方案 > 使用 :nth-child(x) CSS 隐藏定价框

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

问题描述

我在此页面上有一些定价框：

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>

标签： htmlcss

解决方案

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

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

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

推荐阅读