Почему смежный селектор не работает?

Question

я узнал от here вставить изображение с титрами в Markdown по

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

, который отображается как следующий HTML,

<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 

Он нацелен <em> элементы, которые непосредственно следуют за <br>, что немедленно следовать <img>.

В первом примере, селектор работает, потому что все элементы являются братья в 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> */