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

Question

我希望使用奇数和偶数的 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 是不可能的。已经为 CSS 规范提出了“内容感知”选择器，但尚未实现。

最简单的解决方案是使用 Javascript 定位 <p> 中的图像。标签。我假设你所有的p位于包含元素中，例如 div？如果是这样，以下解决方案是可能的，使用 jQuery:

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

if 语句的逻辑条件通过使用modulus 以偶数为目标。运算符(operator)。 border是一个可以包含您的特殊样式规则的类，如下所示:

.border {
    border:4px solid black;
}