为显示的每个 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

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

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

        if ($result->num_rows > 0) {

            //array of class names for 4 different rows

            $array = array('first', 'second', 'third', 'fourth');

            //counter variable

            $i = 0;  

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

                echo '

                    <div class="ot-slider-layer '.$array[$i].'">

                        <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>

                ';

                //increment counter variable for each row loop

                ++$i;

            }

        } else {

            echo "There is no news";

        }

    ?>

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">

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

        <a href="https://stackoverflow.com/questions/59326081/add-different-styling-to-each-mysql-row-displayed">First</a>

    </div>

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

        <a href="https://stackoverflow.com/questions/59326081/add-different-styling-to-each-mysql-row-displayed">Second</a>

    </div>

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

        <a href="https://stackoverflow.com/questions/59326081/add-different-styling-to-each-mysql-row-displayed">Third</a>

    </div>

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

        <a href="https://stackoverflow.com/questions/59326081/add-different-styling-to-each-mysql-row-displayed">Fourth</a>

    </div>

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

        <a href="https://stackoverflow.com/questions/59326081/add-different-styling-to-each-mysql-row-displayed">Fifth</a>

    </div>

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

        <a href="https://stackoverflow.com/questions/59326081/add-different-styling-to-each-mysql-row-displayed">Sixth</a>

    </div>

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

        <a href="https://stackoverflow.com/questions/59326081/add-different-styling-to-each-mysql-row-displayed">Seventh</a>

    </div>

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

        <a href="https://stackoverflow.com/questions/59326081/add-different-styling-to-each-mysql-row-displayed">Eighth</a>

    </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">

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

        <a href="https://stackoverflow.com/questions/59326081/add-different-styling-to-each-mysql-row-displayed">First</a>

    </div>

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

        <a href="https://stackoverflow.com/questions/59326081/add-different-styling-to-each-mysql-row-displayed">Second</a>

    </div>

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

        <a href="https://stackoverflow.com/questions/59326081/add-different-styling-to-each-mysql-row-displayed">Third</a>

    </div>

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

        <a href="https://stackoverflow.com/questions/59326081/add-different-styling-to-each-mysql-row-displayed">Fourth</a>

    </div>

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

        <a href="https://stackoverflow.com/questions/59326081/add-different-styling-to-each-mysql-row-displayed">Fifth</a>

    </div>

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

        <a href="https://stackoverflow.com/questions/59326081/add-different-styling-to-each-mysql-row-displayed">Sixth</a>

    </div>

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

        <a href="https://stackoverflow.com/questions/59326081/add-different-styling-to-each-mysql-row-displayed">Seventh</a>

    </div>

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

        <a href="https://stackoverflow.com/questions/59326081/add-different-styling-to-each-mysql-row-displayed">Eighth</a>

    </div>

</div>