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

#html #css #stylesheet #css-selectors

#HTML #css #таблица стилей #css-селекторы

Вопрос:

Я бы хотел, чтобы последний пункт меню был синим, и я пытаюсь использовать псевдокласс 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;
}

1. Я не вижу ни одного случайного синего элемента. Какой браузер вы используете?

2. Я предполагаю, что вы тестируете в IE или чем-то еще, потому что в Firefox это нормально.

3. Я тестирую во всех браузерах. То есть: FF, IE, Safari, Chrome и Opera. Это странно — в FF пункт меню «ссылки» синего цвета, но в остальных они все синие, за исключением «home».

4. Немного не по теме, но кто-нибудь еще видит здесь странную подсветку кода? Вот картинка: i.imgur.com/mHgcA.png

5. Да, я тоже это заметил. Что дает?

Ответ №1:

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

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

Ответ №2:

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

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

 #access ul li:last-child a {
}

Ответ №3:

Я предполагаю, что вы не используете :last-child должным образом.

Из W3C:

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

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

 #access a:last-child

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

Возможно, вам захочется поискать a родительский:

 #access ul li:last-child a

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