Question

我有一个网站，导航栏目前看起来像

主页|新闻|关于我们|

如何在“关于我们”之后删除该行？

HTML

<nav>
    <ul>
        <li> 
            <a href="index.php">HOME</a>
        </li>
        <li> 
            <a href="news.php">NEWS</a>
        </li>
        <li> 
            <a href="aboutus.php">ABOUT US</a>
        </li>
    </ul>
</nav>

CSS

nav {
    float:right;
    clear:right;
    width:40%;
    margin:0;
    margin-top:30px;
    margin-right:8%;
}

nav ul {
    margin: 0;
    padding: 0;
    font-family: Microsoft Yi Baiti;
}

nav ul li{
    list-style: none;
}

nav ul li a{
    text-decoration: none;
    float: left;
    display: block;
    padding: 10px 30px;
    color: black;
    border-right: 1px solid #ccc;
}

nav ul li a:hover {
    transition: all .2s ease-in;
    color: rgb(204,204,204);
}


nav li.last {
    border: none ;
}

CSS中的最后一行我试图删除边框，但遗憾的是它不起作用。有人可以帮忙吗？谢谢！

Answer 1

a标记上的边框不是li。此外，li没有last类，因此请使用:last-child。你想这样定位它：

nav li:last-child a {
    border: none;
}

小提琴：http://jsfiddle.net/pqe9hc6y/

Answer 2

使用:last-child上的li伪类并定位锚标记。

像这样：

nav ul li:last-child a{
    border-right: none;
}

如何删除导航栏上的最后一个边框？

2 个答案: