我需要為從 mysql 顯示的每一行添加不同的樣式。我正在顯示最后 4 行，從第一行開始，樣式應(yīng)該被稱為第一、第二、第三、第四。<?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"; } ?>
3 回答
慕后森
TA貢獻1802條經(jīng)驗 獲得超5個贊
這將在這種情況下工作：
<?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";
}
?>
波斯汪
TA貢獻1811條經(jīng)驗 獲得超4個贊
這可以在 CSS 中輕松完成，無需服務(wù)器端計算。如果您希望每 4 行替換一次樣式，或者只是設(shè)置最后 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>
- 3 回答
- 0 關(guān)注
- 162 瀏覽
添加回答
舉報
0/150
提交
取消