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选择器。

Answer 3

在CSS中，无需服务器端计算即可最轻松地完成此操作。您是否想知道每4行要替换样式还是仅对最后4行进行样式设置，您的问题尚不清楚，但是可以执行以下操作：

替代：使用:nth-child selector。

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 selector

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>

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

3 个答案: