2

我有以下 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;
}

哪个没有样式.seeker元素（链接到第 1 号小提琴），没有#player 它的地方（链接到第 2 号小提琴）：

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

    height: 50px;

    background-color: #575757;

    color: white;
}

我很困惑，因为直接选择，没有+ 它选择元素（链接到第 3 号小提琴），所以，有一个匹配的#player .seeker.

注意：每个小提琴都有几乎相同的结果，但是它们的 CSS 有点不同。

这里发生了什么？

4

3 回答 3

3

#player .frame + #player .seeker不会工作，因为它正在寻找一个#player，它是另一个#player 中.frame 的兄弟。

你想要的可能是#player .frame + .seeker，它将选择一个 .seeker，它是 #player 中 .frame 的紧随其后的兄弟。

查看http://meyerweb.com/eric/articles/webrev/200007a.html了解更多示例

于 2013-03-22T14:00:46.643 回答
1

兄弟选择器相对于该点的选择器。它不会再次从文档顶部开始。所以#player .frame + .seeker是正确的。指定#player就像打字一样#player #player ...。

于 2013-03-22T14:00:01.440 回答
1

考虑以下：

<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”（证明）的选择器。

关键是，+它只是一个运算符——就像>和（一个空格）一样。它不会“分组”其操作数。

于 2013-03-22T14:05:59.000 回答