CSS：在容器

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>，图像总是导致类型为{{1的第一个子节点它的父母，所以总是应用奇怪的样式（向左浮动）。我如何做到这一点 - 相对于<img>标签选择<img>标签 - 正确而不更改标记？

PS。我可以将{nth- *选择器应用于<article> - s，但在这种情况下，图像与<p>无关，只有<article> - s'顺序才对这两个图像产生影响如果他们各自的<p> - s都是奇数，或者两者都在<p>之下，则浮动到一边。我希望你明白这个主意。也许我陷入了一个愚蠢/简单的问题，但我无法弄明白:(

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');
}