html - 即時兄弟セレクタの誤解

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;
}

要素のスタイルを設定しませんでした (フィドル 1 へのリンク)、それ.seekerなし#player では (フィドル 2 へのリンク) :

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

    height: 50px;

    background-color: #575757;

    color: white;
}

+ 要素を選択せず​​に直接選択すると (fiddle no. 3 へのリンク) が選択されるため、混乱してい#player .seekerます。

注:各フィドルの結果はほぼ同じですが、CSS が少し異なります。

ここで何が起きてるの？

Answer 1

#player .frame + #player .seeker別の#player内の.frameの兄弟である#playerを探しているため、は機能しません。

必要なのはおそらくです#player .frame + .seeker。これは、＃player内の.frameの直後の兄弟である.seekerを選択します。

その他の例については、http：//meyerweb.com/eric/articles/webrev/200007a.htmlを確認してください。

Answer 2

兄弟セレクターは、その時点までのセレクターを基準にしています。ドキュメントの先頭から再開することはありません。ですから#player .frame + .seeker正しいです。指定#playerは、入力するようなもの#player #player ...です。

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」で満たされたものを見つけます。しかし、あなたのものと同じように書かれたセレクターは、「BAR」（証明.parent .child + .parent .sibling）で満たされたものを見つけます。

要点は、+は単なる演算子です ->と(空白) はそうです。オペランドを「グループ化」しません。