0

这是与 Wordpress 相关的问题，但由于所需的解决方案纯粹与 CSS 相关，因此我将其发布在这里，而不是wordpress.stackexchange.com。

在我当前的样式中，如果图像没有以下标题，则使用这样的 HTML 代码放置它：

<p>
    <a href="http://cnn.com/file.jpg">
        <img src="http://cnn.com/file-300x225.jpg" alt="" width="300" height="225" class="aligncenter size-medium wp-image-55">
    </a>
</p>

在我目前的风格中，它的风格是这样的：

img {
    display: block;
    padding: 5px;
    background-color: #eee;
    border: 1px solid #ddd;
}

它在它周围绘制了简单的边框。

如果图像后面有标题，则这部分的整个 HTML 会稍微复杂一些：

<div id="attachment_55" class="wp-caption aligncenter" style="width: 310px">
    <a href="http://cnn.com/file.jpg">
        <img src="http://cnn.com/file-300x225.jpg" alt="" width="300" height="225" class="size-medium wp-image-55">
    </a>

    <p class="wp-caption-text">Caption</p>
</div>

当前标题根本没有样式（根据我当前选择的主题）。

div如果有任何标题，我想要实现的是具有整个样式（图像和标题）。如果我没记错的话，那只需要样式img（如当前），如果它后面没有<p class="wp-caption-text">. 如果是，则根本不应该设置 img 样式，<div class="wp-caption">而是应该设置第二行父级 ( ) 的样式。

这就是算法的全部内容。但是如何在 CSS 中编码（以及是否可能）——我不知道。

最简单的解决方案是永远不要设置样式img，而是始终设置样式<div class="wp-caption">，无论图像后面是否有标题。但问题是，如果有标题，Wordpress 只会添加该 div。因此，如果只有图像，则仅对其进行样式设置将根本没有边框。

4

1 回答 1

1

如果你可以使用 Jquery。

然后你可以操纵标记。如果你的模式img是img with caption这样的，你可以这样做。

$('img').each(function(){
    if($(this).parent().parent().hasClass("wp-caption")){
        $(this).parent().parent().addClass('img');
     }
});

我确信这段代码可以得到更好的优化，但它应该给你一个想法。

看到这个小提琴

于 2013-03-23T19:09:08.160 回答