CSS相邻选择器问题

HTML如下所示：

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

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

有趣的是，更通用的子选择器可以工作：

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

想法？

您不能使用+，因为照片中心不是内容的相邻兄弟，它是子对象的直系后代，所以您可以使用子对象选择器>

根据Mozilla文档：

+组合符将两个字符分开 选择器并匹配第二个 元素，仅当它立即 在第一个之后

报告说：

>组合符将两个字符分开 选择器并匹配第二个 元素（仅当它是直接子元素时） 第一个

下面是上述选择器的JSFIDLE演示，

带有类照片中心的div位于id内容较宽的div内，因此子选择器>可以工作。相邻的选择器+仅当它们彼此相邻时才起作用，如下所示：

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

在您发布的代码中，.photo center是内容范围内的子项，而不是兄弟项

+是同级选择器，>是子选择器

同级选择器不工作，因为元素不是同级元素。

这是因为。照片中心与内容区不相邻。这是一个知足的孩子

以下是相邻标记的示例：

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

---

在本例中，h2与h1相邻。这样，+选择器就会工作。

ahhh！对今天脑子有点慢。只有当照片中心是content\u wide？content\u wide的第一个子代/子代时，才可以将其作为目标。照片中心：第一个子代应仅将其作为目标。照片中心（如果是第一个子代）child@Brent这在这里经常发生，人们总是以秒数击败我；这些基本问题有点像速度竞赛，嗯。