Новые селектора 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 selectors. Но я хочу использовать «+» и «~». Но они, похоже, не работают!

Например:

#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>