Новые селекторы CSS3 не работают для меня?

Question

Хорошо, у меня есть такой код:

<div id="header"> (yeah, have to use div instead of header tag, don't ask me why)
     <a href="link"><img src="image1.png" alt="image1" /></a>
     <a href="link"><img src="image2.png" alt="image2" /></a>
     <a href="link"><img src="image3.png" alt="image3" /></a>
</div>

И я хочу выбрать первое изображение после div (изображение первой ссылки) и две последние ссылки в css.

Я знаю, что могу сделать это с помощью селекторов nth child или first / last child. Но я хочу использовать «+» и «~». Но, похоже, они не работают!

Например:

#header + a {
     border: solid 1px red;
}

Дает границу ... Ничего!

Этот тоже не работает:

#header a + img {
     border: solid 1px red;
}

Что не так?

Тот же эффект с "~". Проверено во всех основных браузерах ....

Answer 1

Вы ошиблись. Селектор, который вы ищете,

#header > a:first-child

Это выберет первый якорь, который является прямым потомком #header. > является прямым потомком, а :first-child дает вам ... ну, первый ребенок. Чтобы получить изображение, вам понадобится

#header > a:first-child > img

Прямой селектор потомков не поддерживается в IE6. Вы можете отказаться от его использования, если нет непрямых потомков, которые вы бы не хотели выбирать, как, например, со структурой у вас выше, у которой нет никаких других якорей, кроме тех, которые вы хотите выбрать.

+ - это соседний селектор брата: http://meyerweb.com/eric/articles/webrev/200007a.html. Следующая HTML-структура - это то, что вам нужно для работы селектора:

<div id="header"></div>
<a href="#"><img src="somewhere" alt="" /></a> <-- Selects this one for #header + a
<a href="#"><img src="somewhere" alt="" /></a>
<a href="#"><img src="somewhere" alt="" /></a>