Проблема смежного селектора CSS

Question

HTML-код выглядит следующим образом:

<div id="content_wide">
<div class="photo-center borderless"><img src="http://example.com/travel-path-map.png" alt="" title="" /></div>

... но по какой-то причине я не могу настроить таргетинг на фотоцентр div следующим образом:

#content_wide + .photo-center { margin-top:10px }

Интереснодостаточно, более общий дочерний селектор работает:

#content_wide > .photo-center { margin-top:10px }

Мысли?

Answer 1

Div с классом photo-center находится внутри div с идентификатором content_wide, поэтому работает дочерний селектор (>).Соседний селектор (+) будет работать только в том случае, если они находятся рядом друг с другом, как показано ниже:

<div id="content_wide"><!-- content --></div>
<div class="photo-center borderless"><!-- more content --></iv>

Answer 2

В вашем опубликованном коде .photo-center - это ребенок #content_wide, а не брат или сестра.

+ является селектором одного брата, а > является дочерним селектором.

Селектор брата не работает, поскольку элементы не являются братьями и сестрами.

Answer 3

Вы не можете использовать +, потому что .photo-center не является соседним братом #content_wide, это прямой потомок (дочерний элемент), поэтому вы можете использовать дочерний селектор >.

Согласно документации Mozilla для смежных селекторов братьев и сестер :

Комбинатор + разделяет два селекторы и совпадает со вторым элемент, только если это сразу следуя за первым.

Документация о дочерних селекторах гласит:

Комбинатор> разделяет два селекторы и совпадает со вторым элемент, только если это прямой ребенок из первых.

Вот демонстрационная версия jsFiddle для перечисленных выше селекторов, http://jsfiddle.net/YcHKm/1/

Answer 4

Это потому, что .photo-center не соседствует с content_wide.Это дочерний элемент content_wide.

. Вот пример смежных тегов:

<h1>Test</h1>
<h2>Test</h2>

В этом примере h2 смежен с h1.Таким образом, селектор + должен работать.