Warum funktioniert der benachbarte Wahlschalter nicht?

Question

Ich lernte von here von

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

ein Bild mit Bildunterschriften in Abschriften einzufügen, die wie die folgenden HTML gerendert wird,

<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> 

Dann benachbarte Selektoren verwenden Sie den Stil für das Bild anpassen Untertitel.

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

Es funktioniert.

---

Jetzt füge ich einen Hyperlink zum Bild hinzu. Der HTML-Code sieht so aus:

<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> 

Ich habe die folgenden benachbarten Selektoren versucht, aber es funktioniert nicht.

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

Was ist los mit meinen benachbarten Selektoren?

Answer 1

Das ist Ihre adjacent sibling selector:

img + br + em 

Es richtet sich <em> Elemente, die sofort eine <br> folgen, die sofort eine <img> folgen.

Im ersten Beispiel wird der Selektor funktioniert, weil alle Elemente Geschwister in der HTML-Struktur sind:

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

Im zweiten Beispiel, schlägt der Wähler, weil die img nicht mehr ist ein Geschwister des br und em . Es ist jetzt ein Kind von a.

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

Sie müssen also Ihren Selektor an die neue Struktur der Elemente anpassen. Dies würde funktionieren:

a + br + em 

Und so würde dies:

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