html - CSS:在容器内按奇数/偶数顺序 float 图像

Question

我在文本中有图像。图片放入<p>标签和偶尔进入<div>标签。全文在里面<article>像这样的标签:

<article>
<h1>Title</h1>
<p><img src="picture1.jpg"> Text...</p>
<p><img src="picture2.jpg"> Text...</p>
</article>

我想实现的是将奇数图像向左浮动，偶数图像向右浮动。我试过这个:

 article img:nth-of-type(odd) {
 float:left;
 }
 article img:nth-of-type(even) {
 float:right;
 }

但是因为 :nth-* 选择器相对于它的直接父元素检查元素 - 在我的例子中是 <p>或 <div> , 图像总是导致类型为 <img> 的第一个 child 它的 parent ，所以奇怪的风格(向左浮动)总是适用。我该怎么做这个技巧 - 选择 <img>相对于 <article> 的标签标记 - 在不更改标记的情况下正确？

附言。我可以将 :nth-* 选择器应用于 <p> -s，但在这种情况下，图像与 <article> 无关并且只有 <p> -s 的顺序很重要，如果它们各自的 <p>，这会导致两个图像都漂浮到一侧-s 在 <article> 下都是奇数或偶数.我希望你明白了。也许我遇到了一个愚蠢/简单的问题，但我无法弄清楚:(

Answer 1

我不确定是否有办法使用 CSS 实现此目的。

但是 javascript + CSS 方法相当简单:

CSS

article img.even {
float: right;
}

Javascript:

var article = document.getElementsByTagName('article')[0];
var articleImages = article.getElementsByTagName('img');

for (var i = 1; i < articleImages.length; i = i + 2) {
    articleImages[i].classList.add('even');
}