0

我有一些相邻的 div 元素。

<div class="parentdiv">
    <div class="article-teaser-text2">
            some text ...<a href="http://example.com">Lees meer</a>      
    </div>
    <div class="article-teaser-image">
            <img src="somimage.png" >      
    </div>
</div>

如果第二个 div 不包含图像，我想让第一个 div 更宽

是否可以选择div.article-teaser-text2ifdiv.article-teaser-image > img

我想是这样的：

div.article-teaser-image > img ~ div.article-teaser-text2

但如果我没记错的话，那会选择div.article-teaser-text2如果它是兄弟的话。img

我知道我可以做到这一点是 jQuery，但我正在寻找 CSS 解决方案

4

1 回答 1

0

不，当前的规范没有这样的选择器，这是有充分理由的。考虑这个类比。

作为人类，我们继承了父母的特征——肤色、眼睛颜色、身高和许多其他身体属性。现在我们可以自由地覆盖部分或全部这些特征，但我们可能永远不会定义我们父母的特征。

将这个类比为 CSS 并理解子元素永远不应该定义父元素的特征。

应用此策略有一个解决方案。

<div class="parentdiv HASimage">
    <div class="article-teaser-text2">
            some text ...<a href="http://example.com">Lees meer</a>      
    </div>
    <div class="article-teaser-image">
            <img src="somimage.png" >      
    </div>
</div>

注意我是如何添加“HASimage”类的。向父级添加特定类以区分子级是否具有图像。这可以使用 PHP 或任何服务器端语言轻松完成。然后在 css 中执行以下操作：

.parentdiv .article-teaser-image {
     normal traits (without image)
}
.parentdiv.HASiamge .article-teaser-image {
     override traits and add extra traits (with image)
}

希望这能推动你朝着正确的方向前进。

问候。

于 2013-06-24T15:36:33.823 回答