Поломанные селекторы

[doremidoredo]

Привет!

Возникла проблема при использование  соседних селекторов в браузерах Safari 5.1.7 Chrome 31.0.1650.57. В браузерах Opera 15 и IE 9(как не странно) все работает. 

 

Подведу к проблеме с помощью примеров.

и так имеем код: http://jsfiddle.net/FxunN/

 

имеем результат:

1 блок не подсвечен

2 блок подсвечен оранжевым

3 блок синий

все работает правильно, в любых браузерах.

 

теперь добавим какой-нибудь псевдокласc, к примеру hover.

имеем код: http://jsfiddle.net/AhC6Z/2/

 

При наведение курсора на блок номер один, имеем результат:

1 блок не подсвечен 

2 блок подсвечен оранжевым (во всех браузерах)

3 блок подсвечен синим (в Opera  и IE  работает) (Safari  Chrome  не подсвечивают)

 

В этом и заключается проблема. Если мы имеем много к примеру span, расположенных один за одним, а хотим применить стиль именно к четвертому

конструкция:

 

span + span + span + span {стиль}

 

то все работает. Если же мы хотим к четвертому span, применить  стиль именно по псевдо-классу 

 

конструкция:

 

span:hover + span + span + span {стиль}

 

то в Safari и Chrome такая конструкция не работает. В Opera  и IE работает.

Работает в Safari и Chrome только такая конструкция:

 

span:hover + span

 

Также имеются не задокументированные возможности) Если со злости взять и быстро, быстро дергать курсором поверх всех трех блоков, то Safari и Chrome все же подсветит синий блок)

попробовать:http://jsfiddle.net/AhC6Z/2/

 

В случае с контекстными, дочерними селекторами все работает с любой глубиной.

примеры:

http://jsfiddle.net/RDV7m/2/

http://jsfiddle.net/xfqTP/1/

[ryter]

Chrome 32.0.1700.14 beta-m Aura все работает 

[doremidoredo]

ребята отпишитесь пожалуйста. сработали у вас все примеры, или нети версию вашего браузера.

[sasha_b]

Баг вебкита, значит еще не исправили. См здесь и здесь