Question

所以我有这个演示https://fiddle.jshell.net/nx4s6jsd/，我有那个html结构。我想从最后一个孩子中删除broder-bottom，但我不知道如何。我试过

$newCollection = collect([
    ["name" => "John", "apples" => 8, "pears" => 4, "oranges" => 6, "bananas" => 5],
    ["name" => "Jane", "apples" => 3, "pears" => 4, "oranges" => 2, "bananas" => 3],
    ["name" => "Joe", "apples" => 86, "pears" => 76, "oranges" => 79, "bananas" => 77],
    ["name" => "Janet", "apples" => 3, "pears" => 16, "oranges" => 13, "bananas" => 15],
])->map(function ($row) {
    return [
        'name' => $row['name'],
        'data' => array_values(array_slice($row, 1))
    ];
});

但它没有用。任何建议？

.product:last-child{
   border-bottom:none:
}

Answer 1

你需要在div中包装.product，问题就出现在你的代码中.product不是父div的最后一个孩子所以检查我的代码片段

.black_line{
    margin-top: 30px;
    border-bottom: 1px solid #24282f;
    margin-bottom: 20px;
}
.finish_button{
    float: left;
    margin-bottom: 60px;
}
.finish_button a{
   padding: 12px 45px;
}
.right{
    float: right;
}
.order_list{
    float: left;
    margin-top: 20px;
    border-top:1px solid black;
    border-bottom: 1px solid black;
    padding-top: 10px;
    padding-bottom: 10px;
}
.order_product_list{
    float: left;
    margin-top: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid #cccccc;
}
.order_product_list:last-child{border: 0;}

<div class="checkout">
                            <div class="checkout_title"><span>Vasa narudzba</span></div>
  <div class="product-holder">
                                <div class="product custom_form_title order_product_list">  
                                    <div class="row">
                                        <div class="col-md-4 col-sm-4 col-xs-12 no-padding-right">
                                            <div class="product_image">
                                                <img src="assets/img/product1_small.png" class="img-responsive" />
                                            </div>
                                        </div>
                                        <div class="col-md-8 col-sm-8 col-xs-12">
                                            <div class="product_box">
                                                <div class="product_title">
                                                    <span>Product title</span>
                                                </div>
                                                <div class="product_description">
                                                    <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. IntegeLorem ipsum dolor sit amet</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div> 
                                <div class="product custom_form_title order_product_list">  
                                    <div class="row">
                                        <div class="col-md-4 col-sm-4 col-xs-12 no-padding-right">
                                            <div class="product_image">
                                                <img src="assets/img/product1_small.png" class="img-responsive" />
                                            </div>
                                        </div>
                                        <div class="col-md-8 col-sm-8 col-xs-12">
                                            <div class="product_box">
                                                <div class="product_title">
                                                    <span>Product title</span>
                                                </div>
                                                <div class="product_description">
                                                    <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. IntegeLorem ipsum dolor sit amet</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div></div>
                                <div class="row">
                                    <div class="col-md-12 col-sm-12 col-xs-12">
                                        <div class="total custom_form_title order_list">
                                            <span class="left-title">Cijena bez PDV-a</span><span class="right-title">0,000.00 KM</span>
                                            <span class="left-title">PDV(17%)</span><span class="right-title right">0,000.00 KM</span>
                                            <span class="left-title">Postarina</span><span class="right-title right">0,000.00 KM</span>
                                            <span class="left-title">Total cijena</span><span class="right-title right">0,000.00 KM</span>
                                        </div>
                                    </div>
                                </div>
                            </div>

Answer 2

尝试使用nth-child(3)并删除边框，如下所示：

.product:nth-child(3){
  border-bottom: none;
}

如果您检查代码，您会看到在最后.product div之后还有另一个div，因此:last伪选择器不会选择任何内容

last-child选择器用于选择a的最后一个子元素家长。它不能用于选择带有a的最后一个子元素给定父元素下的特定类。

更好的方法是将所有.product项包装在另一个容器中，然后应用.product:last-child选择器

Answer 3

不要担心。只需删除样式＆＃34; border-top：1px solid #cccccc; ＆＃34;来自选择器＆＃34; .order_product_list ＆＃34;。

以下是针对此类情况的通用解决方案。 相邻的兄弟选择器（+）。

CSS

添加此

.order_product_list + .order_product_list{
  border-top: 1px solid #cccccc;
}

如何从last-child中删除边框？

3 个答案: