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

DIVのでID content_wide子セレクタ（>）作品でDIV内にあります。これと同様の隣接セレクタ（+）彼らはお互いの隣にいた場合にのみ動作します：あなたの投稿をコードで

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

Answer 2

あなたは.photo-centerが#content_wideの隣接兄弟ではないので、それが直接の子孫（子）ですので、あなたは、子セレクタ>を使用することができます+を使用することはできません。 adjacent sibling selectors用Mozillaのドキュメントによれば

：

+コンビネータは、二つ セレクタを分離し、それが最初の直後 場合にのみ第二 要素と一致します。

child selector documentationは言う：

を>コンビネータは2つの のセレクタを分離し、それが最初の直接の子 である場合にのみ、第二 要素と一致します。ここ

上記セレクタのjsFiddleデモで、クラスphoto-centerと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に隣接しています。この方法では、+セレクタが機能するはずです。