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位于div content_wide的div中，因此子选择器（>）可以正常工作。相邻的选择器（+）只有在它们彼此相邻时才有效，类似于：

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

Answer 2

您无法使用+，因为.photo-center不是#content_wide的相邻兄弟，它是直接后代（孩子），因此您可以使用子选择器{{1 }}

根据adjacent sibling selectors的Mozilla文档：

  

+组合子分开两个   选择器和匹配第二个   元素只有在它是立即的时候   在第一个之后。

child selector documentation说：

  

＆gt;组合器分开两个   选择器和匹配第二个   元素，只有它是直接的孩子   第一个。

以下是上述选择器的{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>

在此示例中，h2与h1相邻。这样，+选择器就可以工作。