用于在List中设置last-child的样式的CSS

Question

我有一个由php从sql表生成的列表，我试图在最后<li>添加一些css，但它会影响所有<li>。 是否有我不理解的东西，或者我的代码中是否有特定内容？

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%;
}

Answer 1

请尝试使用：

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

<强>结果

Answer 2

这应该有效：

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

如果没有尝试：

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

并且它必须意味着您的<p>在您的css中具有更高特异性值的其他位置具有已定义的颜色。

Answer 3

您的PHP代码只输出一行，一行LI以＃4cd964或＃ffcc00作为背景色。我没有看到任何迭代结构输出更多行。如果你的迭代在<UL>...</UL>块的外面，那么你输出的列表就像迭代一样多......这意味着：last-child适用于页面上的每个LI。

请发布完整的PHP代码。