隣接セレクタが機能しないのはなぜですか？

Question

私は画像のスタイルをカスタマイズする隣接セレクタを使用すると、次のHTMLとしてレンダリングされる

!["dominating_sets_example2"](http://example.com/path/dominating_sets_example2.png) 
*Fig. 1: The minimum dominating set of a graph* 

によってマークダウンでキャプション付きの画像を挿入するhereから

<p> 
    <img src="http://example.com/path/dominating_sets_example2.png" alt="dominating_sets_example2"/> 
    <br> 
    <em>Fig. 1: The minimum dominating set of a graph</em> 
</p> 

を学びましたキャプション。

/* for image caption */ 
img + br + em { 
    font-style: normal; 
    display: inherit; 
    text-align: center; 
    font-size: 90%; 
} 

これは機能します。

---

ここで、画像にハイパーリンクを追加します。 HTMLは以下のようになります。

<a href="http://example.com/path/bus.png" rel="attachment wp-att-2362" data-rel="lightbox-0" title=""> 
    <img src="http://example.com/path/bus.png" alt="compara_autocar_bus" width="610" height="675" class="aligncenter size-full wp-image-2362"> 
</a> 
<br> 
<em> 
    Fig. 1: Caption here (image from <a href="http://www.example.com/" target="_blank">here</a>) 
</em> 

私は以下の隣接セレクタを試しましたが、うまくいきません。

a + img + br + em { 
    font-style: normal; 
    display: inherit; 
    text-align: center; 
    font-size: 90%; 
} 

隣り合うセレクタに問題がありますか？

Answer 1

これはあなたのadjacent sibling selector次のとおりです。

img + br + em 

それはすぐにすぐに<img>に従っ<br>に従っ<em>要素を対象としています。すべての要素がHTML構造に兄弟であるため、最初の例で

、セレクタの動作：第二の例で

<p> 
    <img src="..." alt="dominating_sets_example2"/> 
    <br> 
    <em>Fig. 1: The minimum dominating set of a graph</em> 
</p> 

、セレクタはimgがもはやbrの兄弟であるため失敗していないとem 。現在はaの子になっています。

<p> 
    <a> 
     <img src="..." alt="dominating_sets_example2"/> 
    </a> 
    <br> 
    <em>Fig. 1: The minimum dominating set of a graph</em> 
</p> 

したがって、要素の新しい構造に合わせてセレクタを調整する必要があります。これは動作します：

a + br + em 

をそしてそうだろう、この：

p > em /* uses child selector to target <em> elements that are children of <p> */