为显示的每个 MYSQL 行添加不同的样式

Question

我需要为从 mysql 显示的每一行添加不同的样式。我正在显示最后 4 行，从第一行开始，样式应该被称为第一、第二、第三、第四。

<?php

        $sql = "SELECT * FROM articles ORDER BY id DESC LIMIT 4";

        $result = $con->query($sql);

        if ($result->num_rows > 0) {

            while($row = $result->fetch_assoc()) {

                echo '

                    <div class="ot-slider-layer first">

                        <a href="articles/'.$row['slug'].'">

                            <strong><i style="background-color: #ed2d00; color: #fff;">'.category_name_by_id($row['category']).'</i>'.$row['title'].'</strong>

                            <img src="images/articles/'.$row['image'].'" alt="'.$row['title'].'" />

                        </a>

                    </div>

                ';

            }

        } else {

            echo "There is no news";

        }

    ?>

Answer 1

这将在这种情况下工作：<?php&nbsp; &nbsp; &nbsp; &nbsp; $sql = "SELECT * FROM articles ORDER BY id DESC LIMIT 4";&nbsp; &nbsp; &nbsp; &nbsp; $result = $con->query($sql);&nbsp; &nbsp; &nbsp; &nbsp; if ($result->num_rows > 0) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; //array of class names for 4 different rows&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $array = array('first', 'second', 'third', 'fourth');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; //counter variable&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $i = 0;&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; while($row = $result->fetch_assoc()) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; echo '&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="ot-slider-layer '.$array[$i].'">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a href="articles/'.$row['slug'].'">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <strong><i style="background-color: #ed2d00; color: #fff;">'.category_name_by_id($row['category']).'</i>'.$row['title'].'</strong>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <img src="images/articles/'.$row['image'].'" alt="'.$row['title'].'" />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </a>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ';&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; //increment counter variable for each row loop&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ++$i;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; echo "There is no news";&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; ?>

Answer 2

您应该为此使用 CSS。看看:nth-child-selector。

Answer 3

这可以在 CSS 中轻松完成，无需服务器端计算。如果您希望每 4 行替换一次样式，或者只是设置最后 4 行的样式，您的问题并不清楚。但两者都可以使用 CSS 来完成：交替：使用:nth-child选择器。div.ot-slider-layer:nth-child(4n+1) { background: #00ffff50; }div.ot-slider-layer:nth-child(4n+2) { background: #0000ff50; }div.ot-slider-layer:nth-child(4n+3) { background: #00000050; }div.ot-slider-layer:nth-child(4n+4) { background: #ff000050; }<div class="container">&nbsp; &nbsp; <div class="ot-slider-layer">&nbsp; &nbsp; &nbsp; &nbsp; <a href="https://stackoverflow.com/questions/59326081/add-different-styling-to-each-mysql-row-displayed">First</a>&nbsp; &nbsp; </div>&nbsp; &nbsp; <div class="ot-slider-layer">&nbsp; &nbsp; &nbsp; &nbsp; <a href="https://stackoverflow.com/questions/59326081/add-different-styling-to-each-mysql-row-displayed">Second</a>&nbsp; &nbsp; </div>&nbsp; &nbsp; <div class="ot-slider-layer">&nbsp; &nbsp; &nbsp; &nbsp; <a href="https://stackoverflow.com/questions/59326081/add-different-styling-to-each-mysql-row-displayed">Third</a>&nbsp; &nbsp; </div>&nbsp; &nbsp; <div class="ot-slider-layer">&nbsp; &nbsp; &nbsp; &nbsp; <a href="https://stackoverflow.com/questions/59326081/add-different-styling-to-each-mysql-row-displayed">Fourth</a>&nbsp; &nbsp; </div>&nbsp; &nbsp; <div class="ot-slider-layer">&nbsp; &nbsp; &nbsp; &nbsp; <a href="https://stackoverflow.com/questions/59326081/add-different-styling-to-each-mysql-row-displayed">Fifth</a>&nbsp; &nbsp; </div>&nbsp; &nbsp; <div class="ot-slider-layer">&nbsp; &nbsp; &nbsp; &nbsp; <a href="https://stackoverflow.com/questions/59326081/add-different-styling-to-each-mysql-row-displayed">Sixth</a>&nbsp; &nbsp; </div>&nbsp; &nbsp; <div class="ot-slider-layer">&nbsp; &nbsp; &nbsp; &nbsp; <a href="https://stackoverflow.com/questions/59326081/add-different-styling-to-each-mysql-row-displayed">Seventh</a>&nbsp; &nbsp; </div>&nbsp; &nbsp; <div class="ot-slider-layer">&nbsp; &nbsp; &nbsp; &nbsp; <a href="https://stackoverflow.com/questions/59326081/add-different-styling-to-each-mysql-row-displayed">Eighth</a>&nbsp; &nbsp; </div></div>仅最后 4 个：使用nth-last-child选择器div.ot-slider-layer:nth-last-child(4) { background: #00ffff50; }div.ot-slider-layer:nth-last-child(3) { background: #0000ff50; }div.ot-slider-layer:nth-last-child(2) { background: #00000050; }div.ot-slider-layer:nth-last-child(1) { background: #ff000050; }<div class="container">&nbsp; &nbsp; <div class="ot-slider-layer">&nbsp; &nbsp; &nbsp; &nbsp; <a href="https://stackoverflow.com/questions/59326081/add-different-styling-to-each-mysql-row-displayed">First</a>&nbsp; &nbsp; </div>&nbsp; &nbsp; <div class="ot-slider-layer">&nbsp; &nbsp; &nbsp; &nbsp; <a href="https://stackoverflow.com/questions/59326081/add-different-styling-to-each-mysql-row-displayed">Second</a>&nbsp; &nbsp; </div>&nbsp; &nbsp; <div class="ot-slider-layer">&nbsp; &nbsp; &nbsp; &nbsp; <a href="https://stackoverflow.com/questions/59326081/add-different-styling-to-each-mysql-row-displayed">Third</a>&nbsp; &nbsp; </div>&nbsp; &nbsp; <div class="ot-slider-layer">&nbsp; &nbsp; &nbsp; &nbsp; <a href="https://stackoverflow.com/questions/59326081/add-different-styling-to-each-mysql-row-displayed">Fourth</a>&nbsp; &nbsp; </div>&nbsp; &nbsp; <div class="ot-slider-layer">&nbsp; &nbsp; &nbsp; &nbsp; <a href="https://stackoverflow.com/questions/59326081/add-different-styling-to-each-mysql-row-displayed">Fifth</a>&nbsp; &nbsp; </div>&nbsp; &nbsp; <div class="ot-slider-layer">&nbsp; &nbsp; &nbsp; &nbsp; <a href="https://stackoverflow.com/questions/59326081/add-different-styling-to-each-mysql-row-displayed">Sixth</a>&nbsp; &nbsp; </div>&nbsp; &nbsp; <div class="ot-slider-layer">&nbsp; &nbsp; &nbsp; &nbsp; <a href="https://stackoverflow.com/questions/59326081/add-different-styling-to-each-mysql-row-displayed">Seventh</a>&nbsp; &nbsp; </div>&nbsp; &nbsp; <div class="ot-slider-layer">&nbsp; &nbsp; &nbsp; &nbsp; <a href="https://stackoverflow.com/questions/59326081/add-different-styling-to-each-mysql-row-displayed">Eighth</a>&nbsp; &nbsp; </div></div>