定位无序列表的列表项中的第一个和最后一个锚点

Question

我正在尝试将无序列表的列表项中的第一个和最后一个锚定位:

<ul>
    <li><a href="#">HOME</a></li>
    <li><a href="#">LINK</a></li>
    <li><a href="#">LINK</a></li>
    <li><a href="#">LINK</a></li>
    <li><a href="#">LINK</a></li>
</ul>

我试过了:

.menu ul .last a {}
.menu ul.last a {}
.menu ul li .last a {}
.menu ul li.last a {}

我需要定位锚点,因为我需要删除第一个和最后一个锚点的边框.我不能使用(或者至少我认为我不能)边框<li>,因为它需要一些垂直填充,因此分隔符边框不是垂直齐平的.

Answer 1

如果您不需要担心旧浏览器,请在列表项上使用:first-child和:last-child伪类,如下所示:

/* Because we are looking at the <li> children of your <ul> */
.menu ul li:first-child a {}
.menu ul li:last-child a {}

但是,:last-child现在对CSS3的支持非常差,所以更兼容浏览器的替代方法是手动为最后一个列表项提供一个last类,就像这样(并且首先做同样的事情):

<ul>
    <li class="first"><a href="#">HOME</a></li>
    <li><a href="#">LINK</a></li>
    <li><a href="#">LINK</a></li>
    <li><a href="#">LINK</a></li>
    <li class="last"><a href="#">LINK</a></li>
</ul>

然后,您可以使用这些选择器:

.menu ul li.first a {}
.menu ul li.last a {}