CSS相鄰選擇問題

Question

的HTML看起來像這樣：

<div id="content_wide"> 
<div class="photo-center borderless"><img src="http://example.com/travel-path-map.png" alt="" title="" /></div> 

...但由於某種原因，我似乎無法針對圖片中心DIV這樣的：

#content_wide + .photo-center { margin-top:10px } 

有趣足夠，一個更普遍的兒童選擇器的作品：

#content_wide > .photo-center { margin-top:10px } 

想法？

Answer 1

與類photo-center股利是DIV中與ID content_wide所以孩子選擇器（>）的作品。相鄰的選擇（+）如果他們彼此相鄰，類似這樣只會工作：

<div id="content_wide"><!-- content --></div> 
<div class="photo-center borderless"><!-- more content --></iv> 

Answer 2

不能使用+因爲.photo-center不是#content_wide相鄰的兄弟，這是一個直接後裔（孩子），所以你可以使用子選擇>。

根據Mozilla的文檔爲adjacent sibling selectors：

的+組合子分隔兩個 選擇器和所述第二 元素相匹配，只有當它是立即以下 第一個。

的child selector documentation說：

的>組合子分隔兩個 選擇且僅當它是第一個直接子 第二 元素相匹配。

這裏是上述選擇的演示的jsfiddle，http://jsfiddle.net/YcHKm/1/

Answer 3

在您發佈的代碼，.photo-center是#content_wide一個孩子，而不是一個兄弟姐妹。

+是兄弟選擇器，而>是子選擇器。

兄弟姐妹選擇器不工作，因爲元素不是兄弟姐妹。

Answer 4

這是因爲.photo-center不相鄰到content_wide。它是content_wide的子女。

這裏是鄰近標籤的一個示例：

<h1>Test</h1> 
<h2>Test</h2> 

在本例中，H 2是相鄰的H1。這樣，+選擇器應該工作。