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

然而，现在对CSS3 :last-child的支持非常差，因此更兼容浏览器的替代方法是手动将最后一个列表项设为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 {}

Answer 2

您需要:first-child和:last-child伪类选择器：

<style type="text/css">
.menu ul li:first-child a {
  color: green;
}
.menu ul li:last-child a {
  color: red;
}
</style>

<div class="menu">
  <ul>
    <li><a href="#">apple</a></li>
    <li><a href="#">baker</a></li>
    <li><a href="#">charlie</a></li>
    <li><a href="#">delta</a></li>
  </ul>
</div>

Answer 3

我认为您需要的是：第一个孩子和最后一个孩子选择器。

.menu ul li:first-child a
.menu ul li:last-child a

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

3 个答案: