立即兄弟選擇誤會

我有以下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有些不同。

這裏發生了什麼？

來源

2013-03-22 jolt

可能是因爲它正在尋找一個無法找到的'id =「player」'的兄弟姐妹。之後，它會嘗試尋找一個'class =「seeker」' – musefan 2013-03-22 14:00:01

兄弟姐妹選擇器是相對於選擇器到那一點。它不是從文檔的頂部再次開始。所以#player .frame + .seeker是正確的。指定#player就像打字#player #player ...。

來源

2013-03-22 14:00:01 Olical

簡單而簡短的孩子。謝謝，接受。 – jolt 2013-03-22 14:18:25

#player .frame + #player .seeker不會工作，因爲它正在尋找一個＃播放器，它是在中的另一個.frame的兄弟。另一個＃播放器。

你想要的可能是#player .frame + .seeker，它會選擇一個.seeker，它是#player中緊接着的.frame的兄弟。

退房http://meyerweb.com/eric/articles/webrev/200007a.html一些更多的例子

來源

2013-03-22 14:00:46 xec

考慮以下幾點：

<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選擇會發現一個充滿了「富」。但選擇器與您的相同 - .parent .child + .parent .sibling - 會找到填充了「BAR」（proof）的選項。

關鍵是，+只是一個運營商 - 因爲>和（空白）是。它不會「分組」它的操作數。

來源

2013-03-22 14:05:59 raina77ow

立即兄弟選擇誤會

回答

相關問題