Question

有没有机会从MySQL数据库读取数据以应用PHP代码，因此每个第二条记录都会有不同的东西（不同的css代码）。

例如：我在我的评论系统中使用这样的图像。 http://prntscr.com/3hpiep

每张图片都是圆形，但我希望每一张图片都有一个圆形，其他图片则应该是方形。

可以这样做吗？

Answer 1

您可以使用

.myclass:nth-child(even) {/* round style */}
.myclass:nth-child(odd) {/* square style */}

只要他们共享一个共同的父元素。

如果你有一个更深层的结构，你可能需要在树的上方某处使用选择器，例如。

<div class="parent">
    <div class="comment_image"><img .../></div>
    <div class="comment_image"><img .../></div>
</div>

你想要

.comment_image:nth-child(even) img {/* round style */}
.comment_image:nth-child(odd) img {/* square style */}

（虽然在这个例子中你也可以将样式应用于div - 这只是为了说明层次结构）

从下面评论中粘贴的PHP代码中，您似乎有一个像

这样的结构

<div>
  <div>...</div>
  <div class="comment_box"><div><img/></div>...</div>
  <div>...</div>
  <div class="comment_box"><div><img/></div>...</div>
...
</div>

这意味着您实际上想要将圆形样式应用于外部div中每四个div中的图像，从第二个开始。唷！这是CSS的原因：

.comment_box img {/* square style */}
.comment_box:nth-child(4n+2) img {/* round style */}

Answer 2

在循环中使用计数器。

if($counter%2==0) 
   {//Even}
else
   { // Odd}

Answer 3

您可以使用：n-child偶数和奇数选择器。将每个图片放在同一个标记中（例如<li>或<div>），然后在css中使用

your-tag:nth-child(even) {/* round style */}
your-tag:nth-child(odd) {/* round style */}

Answer 4

您可以使用while循环来迭代数据库查询的结果。在while循环中，您可以确定当前迭代是偶数还是奇数。如果当前迭代是奇数，则将奇数类添加到元素，如果当前迭代是偶数，则将偶数类添加到元素。

我写了一个简单的例子，它使用PDO库来处理数据库：

echo '<div class="items">';
$isOdd = false;
while ($row = $stmt->fetch(PDO::FETCH_ASSOC)){
    echo '<div class="' . (($isOdd) ? 'odd' : 'even') . '"><img src="" /></div>';
    $isOdd = !$isOdd;
}
echo '</div>';

周期的结果将是：

<div class="items">
    <div class="odd"><img src="" /></div>
    <div class="even"><img src="" /></div>
</div>

如何获得相同结果的另一种方法是在CSS中使用nth-child(even)和nth-child(odd)：

.items div:nth-child(even) {
    /* Properties */
}

.items div:nth-child(odd) {
    /* Properties */
}

如何从数据库中更改每秒数据（图片）的css样式？

4 个答案: