css - :last-child vs specific specific id's

Question

我不明白为什么这两个示例的行为不同。 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>

Answer 1

您使用的 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;。如果您想模仿该功能，请将 float: none; 添加到 CSS，如下所示:

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