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

概述我正在尝试将无序列表的列表项中的第一个和最后一个锚定位： <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></ 我正在尝试将无序列表的列表项中的第一个和最后一个锚定位：

<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 ><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 li.first a {}.menu ul li.last a {}

总结

以上是内存溢出为你收集整理的html – 在无序列表的列表项中定位第一个和最后一个锚点全部内容，希望文章能够帮你解决html – 在无序列表的列表项中定位第一个和最后一个锚点所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。