Таргетинг на первую и последнюю привязку в элементе списка неупорядоченного списка

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, например (и выполнение того же для первого): 1008 *

<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

Мне кажется, вам нужны селекторы: first-child и: last-child.

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