Question

这是与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。如果只有图像，那么只有它的造型会导致没有边框。

Answer 1

如果你可以使用Jquery。

然后你可以操纵标记。如果img和img with caption的模式与此类似，则可以执行此操作。

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

我相信这段代码可以更好地进行优化，但它应该会给你一个想法。

请参阅此fiddle

在Wordpress中为图像以及标题（如果存在）设置样式

1 个答案: