如何從數據庫中更改每秒數據（圖片）的css樣式？

Question

從MySQL數據庫讀取數據以應用PHP代碼時有任何機會，因此每一個記錄都會有不同的東西（不同的css代碼）。

例如：我正在使用這樣的圖像作爲我的評論系統。 http://prntscr.com/3hpiep

每張圖片都是圓形的，但我希望每一張圖片都有一個圓形，其他圖片應該是一個正方形。

可以這樣做嗎？

http://prntscr.com/3hplgr

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

您可以使用：nth-​​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 */ 
}