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

【问题标题】：Target the first and last anchor in an unordered list's list item定位无序列表列表项中的第一个和最后一个锚点
【发布时间】：2015-05-14 23:28:56
【问题描述】：

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

<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> 上使用边框，因为它需要一些垂直填充，因此分隔符边框不会垂直对齐。

【问题讨论】：

你的 HTML 是什么？你真的是在声明<li class="last">吗？
不，只是
- HOME
- LINK
- LINK
- LINK
- 链接
.menu是包含<ul>的元素吗？
谢谢，boltclock！请参阅下面的回复，我错过了 li 本身的课程。

标签： html css css-selectors

【解决方案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 {}

【讨论】：

+1 你打败了我。 :) :first-child 和 :last-child 选择器实际上是 CSS2 的一部分。大多数版本的 IE 缺乏对它们的适当支持（尽管它们在 IE9 中工作）但其他浏览器应该没问题。你的变通办法现在可能更安全。
@eaj：不，:last-child 仅适用于 CSS3。
我的立场是正确的。 :first-child 是 CSS2，:last-child 是 CSS3。
@eaj：我仍然对为什么他们没有在 CSS2 中同时提出这两者感到困惑 :)

【解决方案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>

【讨论】：

谢谢，但仅限 CSS 2，我应该这么说。 BoltClock 的评论给了我所需的推动力。再次感谢。
注意：除了 IE 6 和 7 之外的所有东西都可以工作，8 上会有一点问题。

【解决方案3】：

我认为您需要的是 :first-child 和 :last-child 选择器。

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

【讨论】：