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。这样，+选择器应该工作。