css - :last-child与特定的特定ID

我不明白为什么这两个示例的行为有所不同。 HTML和CSS的目标只是简单地将div水平对齐，并让最后一个div（向右）占用剩余空间（容器的剩余宽度）。

为正确的项目使用特定的ID：

<style type="text/css">
#left {
    float: left;
    padding: 0 1cm;
    background-color: #ff0000;
}
#right {
    width: 100%;
    background-color: #00FF00;
}
</style>
<div>
    <div id="left">item 1</div>
    <div id="left">item 2</div>
    <div id="right">last</div>
</div>

使用：last-child：

<style type="text/css">
#left {
    float: left;
    padding: 0 1cm;
    background-color: #ff0000;
}
#left:last-child {
    width: 100%;
    background-color: #00FF00;
}
</style>
<div>
    <div id="left">item 1</div>
    <div id="left">item 2</div>
    <div id="left">last</div>
</div>

最佳答案

您使用的ID错误。 ID代表页面的唯一元素。尝试这个：

的HTML

<div class="list">
    <div>item 1</div>
    <div>item 2</div>
    <div>last</div>
</div>

的CSS

.list div {
    float: left;
    padding: 0 1cm;
    background-color: #ff0000;
}
.list div:last-child {
    width: 100%;
    background-color: #00FF00;
}

编辑

您的#right示例显示不同，因为它没有继承float: left;。如果要模仿该功能，请在CSS中添加float: none;，如下所示：

.list div {
    float: left;
    padding: 0 1cm;
    background-color: #ff0000;
}
.list div:last-child {
    float: none;
    width: 100%;
    background-color: #00FF00;
}

关于css - :last-child与特定的特定ID，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/12829097/