Как я могу применить правила CSS к смежным смежным элементам?

Question

Я понимаю, как использовать селектор :hover, но я хотел бы применять правила аналогично непосредственно смежным элементам. Например, если у меня есть ссылки A, B, C и D в плоском списке, я бы хотел, чтобы B и D были применены, когда мышь над C.

Самый интуитивный метод, который приходит на ум, перекрывается в <a> теги, так что правило применяется к соседним текстовых узлов, например, так:

<a>A<a>B</a></a>

Если я применить стиль к первому якорю, оно должно влиять как а и в, и т.д.

Меня интересует решение, совместимое с HTML5, IE и Chrome.

Answer 1

Во-первых, теги в хорошо сформированном HTML должны быть автономными - <a><b></a></b> неверен. Рассмотрим на секунду то, на что указывает совпадение href. Если вы включите B в элемент A, он будет делиться всеми атрибутами: и тот, который устанавливает его стиль, и тот, который определяет, к чему он привязан. То, что вы не можете отделить их, должно указывать на то, что это может быть неправильным способом. Канонически мы говорим, что HTML должен представлять структуру документа, и то, что вы хотите изменить, это стиль .

Если бы мы посмотрели some CSS selector reference, мы найдем похожие на :hover. + и ~ должны выглядеть полезными, но на самом деле дает нам все элементы до и после, что не совсем то, что вы ищете.

Самый разумный способ для этого, мне кажется, нуждается в JavaScript. Отъезд this JSFiddle для демонстрации. (Я использую jQuery здесь.)