Немедленного селектор родственного недоразумение

Question

У меня есть следующий HTML:

<div id="player"> 
    <div class="frame" data-aspect="4:3"> 
    </div> 

    <div class="seeker"> 
    </div> 

    <div class="controls"> 
    </div> 

    <div class="extra-controls"> 
    </div> 
</div> 

И я пытался получить доступ к .seeker со следующим селектором:

#player .frame + #player .seeker 
{ 
    margin-top: 1em; 

    height: 50px; 

    background-color: #575757; 

    color: white; 
} 

Какого did not style the .seeker element (link to fiddle no. 1), где без #playerit did (link to fiddle no. 2):

#player .frame + .seeker 
{ 
    margin-top: 1em; 

    height: 50px; 

    background-color: #575757; 

    color: white; 
} 

Я смущен, потому что выбираю напрямую, без +it selects the element (link to fiddle no. 3), так что есть матч для #player .seeker.

Примечание: Каждый из скриптов имеет почти одинаковые результаты, но их CSS немного отличается.

Что здесь происходит?

Answer 1

Селектор для родственников относительно селектора до этой точки. Он больше не начинается с верхней части документа. Таким образом, #player .frame + .seeker верен. Задание #player похоже на ввод #player #player ....

Answer 2

#player .frame + #player .seeker не будет работать, потому что он ищет #player, который является родным .frame внутри другой #player.

Возможно, что вы хотите #player .frame + .seeker, который выберет .seeker, который сразу же после брака в .frame внутри #player.

Заканчивать http://meyerweb.com/eric/articles/webrev/200007a.html еще несколько примеров

Answer 3

Рассмотрим следующий пример:

<div class="parent"> 
    <div class="child"> 
    </div> 
    <div class="sibling"> 
    FOO 
    </div> 
    <div class="child"> 
    </div> 
    <div class="parent"> 
    <div class="sibling"> 
     BAR 
    </div> 
    </div> 
</div> 

Для этой структуры, .parent .child + .sibling селектор будет найти один заполненный «Foo». Но селектор, написанный так же, как ваш - .parent .child + .parent .sibling - найдет тот, который заполнен «BAR» (proof).

Дело в том, + - всего лишь оператор - > и (пробел). Он не «группирует» свои операнды.