在无序列表的列表项中定位第一个和最后一个锚点 [英] Target the first and last anchor in an unordered list's list item

问题描述

我尝试指定无序列表的列表项中的第一个和最后一个锚点：

  ul> 
< li>< a href =＃>首页< / 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 伪类，如下所示：

  / *因为我们正在查看< li>您的< ul> * / 
 .menu ul li：first-child a {} 
 .menu ul li：last-child a {} 
  

但是，现在对CSS3 ：last-child 的支持相当差，因此更多浏览器兼容的替代方法是手动最后一个列表项a 最后类，像这样（首先做同样的）：

 < ul> 
< li class =first>< a href =＃>首页< / 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 {} 
  




I'm trying to target the first and last anchor within a list-item of an unordered list:

<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>

I have tried:

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

I need to target the anchor as I need to remove the border of the first and last anchor. I can't use (or at least I don't think I can) border on the <li>, as it needs some vertical padding so the separator border is not vertically flush.

解决方案

If you don't need to worry about old browsers, use the :first-child and :last-child pseudo-classes on the list items, like so:

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

However, support for CSS3 :last-child is pretty poor right now, so a more browser-compatible alternative is to manually give the last list item a last class, like so (and doing the same for first):

<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>

Then, you can use these selectors:

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

这篇关于在无序列表的列表项中定位第一个和最后一个锚点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！