本文介绍了如何在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中删除最后一个分隔线?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

09-04 22:10