псевдокласс: странность последнего ребенка

Question

Мне бы хотелось, чтобы последний пункт меню был синим, и я пытаюсь использовать класс psuedo a:last child для достижения этой цели.Странно то, что он применяет правило к, казалось бы, случайному a:link в середине меню.Можете ли вы сказать мне, почему?

сайт: http://www.robert -wright-books.com / STAGE

CSS:

#access {
 background: transparent;
 float: left;
 font-size: 1.4em;
 text-transform: uppercase;
 overflow: hidden;
 width: 238px;
 margin: 36px 0 0 18px;
}
#access a:last-child {  color: #006ccf }
#access ul {
 list-style-type: none;
 margin: 0;
 padding: 0;
 margin-bottom: 0;
}
#access ul li { border-bottom: 1px dotted #957e5e }
#access ul li:last-child { border-bottom: none }
#access ul li a,
#access ul li a:hover,
#access ul li a:visited {
 color: #432f00;
 display: block;
 padding: 6px 24px;
 line-height: 17px;
 text-decoration: none;
}

Answer 1

Все ссылки являются последним и единственным потомком своего родителя (li).

Вам нужно нацелиться на последнюю li и оформить ее ссылку:

#access ul li:last-child a {
}

Answer 2

Полагаю, вы не используете :last-child правильно.

Из W3C :

Псевдокласс :last-child представляет элемент, который является последним дочерним элементом некоторого другого элемента.

Когда вы говорите:

#access a:last-child

Вы ищете последнего потомка элемента a, принадлежащего элементу #access. Но a не имеет детей, поэтому это не будет работать должным образом.

Возможно, вы захотите найти родителя a:

#access ul li:last-child a

Этот код ищет последнего дочернего элемента ul и выбирает его a элементов (есть только один).

Answer 3

Учтите, что #access a - единственный a дочерний элемент #access,, остальные ссылки заключены в LI, поэтому LI является дочерним, а не A.

#access ul li:last-child a указывает на последний пункт меню.