如何在CSS中删除最后一个分隔线?

问题描述

我想摆脱这个菜单中的最后一个分隔线 http://prntscr.com/1dmia <-如您在与我们联系"链接中看到的一样，在那之后有分隔线，我不想显示.我已经尝试过

Hi I want to get rid of the last divider in this menuhttp://prntscr.com/1dmia <- as you can see here at the 'Contact Us' link , after that there is divider , I want to not show it.Ive tried this

#nav ul li:last:after{
content:'';
}

但不起作用

这是菜单的标记

HTML

<div id="nav" class="center"><!-- nav [START] -->
                <ul>
                    <li><a href="#" title="Home">Home</a></li>
                    <li><a href="#" title="Artist Gallery">Artist Gallery</a></li>
                    <li><a href="#" title="Make an Appointment">Make an Appointment</a></li>
                    <li><a href="#" title="Location">Location</a></li>
                    <li><a href="#" title="Contact Us">Contact Us</a></li>
                </ul>
</div><!-- nav [END] -->

CSS

#nav ul li{
float:left;
margin-top:10px;
margin-right:35px;
}

#nav ul li:after{
content:'l';
color:#d40202;
margin-left:20px;
}

推荐答案

您要:last-child:

#nav ul li:last-child:after {
    content: '';
}

但是请记住，该伪类仅适用于CSS3(与:first-child即CSS2不同)，最好还是给最后一个li自己的ID或类，然后选择它，否则，浏览器了解:

But bearing in mind that that pseudo-class is CSS3-only (unlike :first-child which is CSS2), you're better off giving the last li its own ID or class, and selecting that instead, which more browsers understand:

#nav ul li.last:after {
    content: '';
}

这篇关于如何在CSS中删除最后一个分隔线?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！