CSS風格的最後一個孩子列表

我有一個從一個SQL表生成的PHP列表，我試圖添加一些CSS到最後<li>，但它影響所有<li>的。有沒有我不明白的東西，或者是在我的代碼中具體的東西？CSS風格的最後一個孩子列表

PHP：

echo "<ul>"; 
     if($row['sender'] == $userid) { 
      echo "<li class='bubble' style='background: #4cd964;'><p>" . $text . "</p></li>"; 
     } else { 
      echo "<li class='bubble' style='background: #ffcc00;'><p>" . $text . "</p></li>"; 
     } 
     echo "</ul>";

CSS：

.bubble { 
    position: relative; 
    margin-bottom: 50px; 
    left: 45%; 
    width:100px; 
    height:100px; 
    border-radius:50%; 
} 
.bubble:last-child { 
    margin-bottom: 20%; 
}

來源

2016-05-02 user3187759

那麼你的代碼在哪裏？ – Thamilan

只是使用'li：last-child {/ * code * /}' –

這就是我正在做的... – user3187759

您的PHP代碼只輸出一行，一個LI以＃4cd964或＃ffcc00作爲背景顏色。我沒有看到任何迭代結構輸出更多的行。如果您的迭代在<UL>...</UL>塊之外，那麼您輸出的迭代次數與清單一樣多......這意味着：最後一個孩子適用於頁面上的每個LI。

請發佈完整的PHP代碼。

來源

2016-05-02 05:31:51 Webomatik

謝謝，我花了一段時間才明白。 – user3187759

你試試這個：

HTML

<ul> 
    <li class="bubble">child 1</li> 
    <li class="bubble">child 1</li> 
    <li class="bubble">child 1</li> 
    <li class="bubble">last child</li> 
</ul>

CSS：

li.bubble:last-child{ 
    color: red 
}

jsfiddle

結果

來源

2016-05-02 04:42:32

沒有好處...我認爲這可能是因爲列表是由php生成的。那可能嗎？ – user3187759

無論從哪裏生成列表，它將始終工作。 –

這應該工作：

li.bubble:last-child{ 
    color: red 
}

如果不嘗試：

li.bubble:last-child p{ 
    color: red 
}

而且必須意味着你的<p>有一個定義的顏色別的地方在你的CSS具有較高的特異性值。

來源

2016-05-02 05:10:49 partypete25

CSS風格的最後一個孩子列表

回答

相關問題