html - CSS child/nth child/typeof 选择器

Question

我不知道如何在 CSS 中选择元素。

<div class="text">
    <img src="./img1.jpg">
    <p>Lorem</p>
</div>
<br> 
<div class="text">
    <img src="./img2.jpg">
    <p>Lorem</p>
</div>

如何选择文本 div 中的每隔一个图像？我想让第一个向左浮动，第二个向右浮动。无论我尝试什么，它们都向左浮动。正如我所理解的奇数选择器，只需选择它们两个。

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

我的目标是:

Answer 1

首先，id是唯一标识符，每页只能使用一次。你最好改成class .和 <br>在此示例中不需要标记，您可以使用 css 设置任何边距的样式:

<div class="text">
  <img src="./img1.jpg">
  <p>Lorem</p>
</div>
<div class="text">
  <img src="./img2.jpg">
  <p>Lorem</p>
</div>

然后，每个奇数 block 和偶数 block 内的图像可以设置为:

.text:nth-child(even) > img {
  float: left;
}
.text:nth-child(odd) > img {
  float: right;
}