我正在尝试将无序列表的列表项中的第一个和最后一个锚定位：
<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>上边界,因为它需要一些垂直填充,因此分隔符边框不是垂直齐平的.
解决方法
如果您不需要担心旧浏览器,请在列表项上使用：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 {}
但是,对CSS3：last-child的支持现在非常差,所以更兼容浏览器的替代方法是手动将最后一个列表项作为最后一个类,就像这样(并且首先做同样的事情)：
<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 {}
