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)，其中没有#player it 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 + #player .seeker无法正常工作，因为它正在另一个 #player中寻找一个#frame的兄弟。

你想要的可能是#player .frame + .seeker，它将选择一个.seeker，紧跟在#player内的.frame兄弟之后。

查看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'的选择器。但是选择器和你的选择器一样 - .parent .child + .parent .sibling - 会找到一个填充'BAR'（proof）的选择器。

关键是，+只是一个运算符 - >和（空白）。它没有“分组”其操作数。

直接兄弟选择器的误解

3 个答案: