html - 如何用CSS划分内容的偶数、奇数？

Question

我有一个包含类似内容的页面。

#################################
#  __________________________   #
# |           |              |  #
# |          |               |  #
# |  text   |       IMAGE    |  #
# |        |                 |  #
# |_______|__________________|  #
#                               #
#  __________________________   #
# |           |              |  #
# |          |               |  #
# |  IMAGE  |        text    |  #
# |        |                 |  #
# |_______|__________________|  #
#################################

我的代码是这样的:

<!-- <p> -> <image> -->
<div class="even_odd">
    <p></p>
</div>
<div class="even_odd">
    <img src="" alt="">
</div>

<!-- <image> -> p -->
<div class="even_odd">
    <img src="" alt="">
</div>
<div class="even_odd">
    <p></p>
</div>

现在，我想设置默认 CSS:

当数字为奇数时，会将text设置为float: left，将image设置为 float :右。

当数字为偶数时，它会将image设置为float: left，将text设置为 float :右。

目前，我必须这样做:

.even_odd:nth-child(1), event_odd:nth-child(4), ..... many and many child .... {
   float: left;
}

.even_odd:nth-child(2), event_odd:nth-child(3), ..... many and many child .... {
   float: left;
}

Answer 1

我们试试这个 CSS 选择器。

selector:nth-child(odd) {
    property
}

selector:nth-child(even) {
    property
}