Question

如何删除最后一个div“footer_column”的边框底部？这是我的HTML -

<div id="footer_wrapper"> <!-- footer_wrapper starts here -->
    <div id="footer"> <!-- footer starts here -->
    <div class="footer_column">
        <h4>Digital Strategy</h4>
        <ul>
            <li><a href="#">Link 1</a></li>
            <li><a href="#">Link 2</a></li>
            <li><a href="#">Link 3</a></li>
        </ul>
    </div>
    <div class="footer_column">
        <h4>Search</h4>
        <ul>
            <li><a href="#">SEO</a></li>
            <li><a href="#">Google AdWords</a></li>
            <li><a href="#">Bing Ads</a></li>
            <li><a href="#">Remarketing</a></li>
        </ul>
    </div>
    <div class="footer_column">
        <h4>Social</h4>
        <ul>
            <li><a href="#">Facebook Ads</a></li>
            <li><a href="#">Youtube Ads</a></li>
        </ul>
    </div>
    <div class="footer_column">
        <h4>Conversion</h4>
        <ul>
            <li><a href="#">Landing Page Creation</a></li>
            <li><a href="#">A/B Testing</a></li>
        </ul>
    </div>
    <div class="footer_column">
        <h4>Contact Us</h4>
        <ul>
            <li><a href="#">About Us</a></li>
            <li><a href="#">Blog</a></li>
        </ul>
    </div>
        <div class="clr"></div>

        <div id="copyright">
            <p>&copy; 2014.</p>
        </div>

    </div> <!-- footer ends here -->
</div> <!-- footer_wrapper ends here -->

这是CSS -

/* footer */
.footer_column
{
    float:none;
    width:100%;
    margin-bottom:5%;
    padding-bottom:10px;
    border-bottom:1px solid #8f8f8f;
}

.footer_column:last-child
{
    border-bottom:none;
}

但它不起作用。最后一个div“footer_column”仍然有边框底部。我知道我可以通过使用first-child和border-top来删除它，但我不想那样做。我只想用border-bottom和last-child来做。请帮帮我。

Answer 1

@LcSalazar是对的，last-child字面意思是元素中的最后一个子元素 - 而不是.footer_columns的最后一个子元素，正如您似乎期待的那样。因此，只有在其后没有其他元素时才会应用last-child规则。

一种解决方案是将所有.footer_columns包装在一个容器中，如下所示：

<div id="footer_wrapper"> <!-- footer_wrapper starts here -->
    <div id="footer"> <!-- footer starts here -->
    <div class="footer_column_container">
        <div class="footer_column">
            <h4>Digital Strategy</h4>
            <ul>
                <li><a href="#">Link 1</a></li>
                <li><a href="#">Link 2</a></li>
                <li><a href="#">Link 3</a></li>
            </ul>
        </div>
        <div class="footer_column">
            <h4>Search</h4>
            <ul>
                <li><a href="#">SEO</a></li>
                <li><a href="#">Google AdWords</a></li>
                <li><a href="#">Bing Ads</a></li>
                <li><a href="#">Remarketing</a></li>
            </ul>
        </div>
        <div class="footer_column">
            <h4>Social</h4>
            <ul>
                <li><a href="#">Facebook Ads</a></li>
                <li><a href="#">Youtube Ads</a></li>
            </ul>
        </div>
        <div class="footer_column">
            <h4>Conversion</h4>
            <ul>
                <li><a href="#">Landing Page Creation</a></li>
                <li><a href="#">A/B Testing</a></li>
            </ul>
        </div>
        <div class="footer_column">
            <h4>Contact Us</h4>
            <ul>
                <li><a href="#">About Us</a></li>
                <li><a href="#">Blog</a></li>
            </ul>
        </div>
    </div>
        <div class="clr"></div>

        <div id="copyright">
            <p>&copy; 2014. All Rights Reserved. eCLICKS New Zealand - eCLICKS United Arab Emirates.</p>
        </div>

    </div> <!-- footer ends here -->
</div> <!-- footer_wrapper ends here -->

Answer 2

我会保持简单的愚蠢，或者：

添加另一个类，.footer-last-child并删除边框：

.footer-last-child {border-bottom：none;}

并将最后一个孩子作为第二课进行分类：

<div class="footer_column footer-last-child">

或 -

为此项添加ID，然后删除边框：＃last-child {border-bottom：none;}

而你的HTML将是

<div class="footer_column" id="last-child">

Answer 3

它不起作用，因为您要定位的元素实际上不是其父元素的最后一个子元素。在这种情况下，最后一个孩子将是copyright div。

此外，没有“最后一个类”选择器。（CSS: How to say .class:last-of-type [classes, not elements!]）

也许你可以针对特定的孩子nth：

.footer_column:nth-child(5) {
    border-bottom:none;
}

虽然它需要divs计数不变。

Answer 4

您的footer_column DIV不是最后一个孩子。你的copyright DIV是最后一个孩子。

尝试将copyright和clr DIV移出footer DIV。

目前没有CSS选择器可以选择容器中具有特定类的最后一个元素。

如何删除组中最后一个div的border-bottom - CSS

4 个答案: