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

为什么相邻选择器不工作？

1 个答案: