Question

我希望使用Odd和Even的CSS3伪选择器来选择HTML中的每个第二个图像。但是图像嵌套在P标签内。并非每个P标签都有图像。

例如：

<p><img src="/example.jpg" /></p>
<p>text</p>
<p>text</p>
<p><img src="/example.jpg" /></p>
<p><img src="/example.jpg" /></p>
<p>text</p>
<p><img src="/example.jpg" /></p>

在没有图像的情况下放置P标签是随机的。

我尝试了这个解决方案，但它无法正常工作，因为它针对P标签的奇数和偶数（不是图像）

p:nth-child(odd) img{
  border:4px solid #000;
}

Answer 1

据我所知，这对CSS来说是不可能的。＆＃39;内容感知＆＃39;已经为CSS规范提出了选择器，但尚未实现。

最简单的解决方案是使用Javascript定位<p>代码中的图片。我假设您的所有p都在包含元素中，例如div？如果是这样，使用jQuery可以使用以下解决方案：

$('div.mycontainer img').each(function(index, element) {
    if (index % 2 != 0) {
        element.addClass('border');
    }
});

if语句的逻辑条件使用modulus运算符来指向偶数元素。 border是一个可以包含特殊样式规则的类，如下所示：

.border {
    border:4px solid black;
}

在子元素伪css3上使用奇数和偶数选择器

1 个答案: