Html Css忽略类规则

这是一个非常基本的问题，但我的CSS似乎忽略了我的类规则，仍然在左侧和右侧应用填充：

这使它从末端落下。有人能看出我做错了什么吗

#num {float: left; background: pink; width: 16.8%; text-align: center; margin: 2%;}
.first {margin-left: 0px; background: blue; height: 50px;}
.last {margin-right: 0px;}

<div id="num" class="first">0</div>
<div id="num">1</div>
<div id="num">4</div>
<div id="num">6</div>
<div id="num" class="last">9</div>

#num{float:左；背景：粉红色；宽度：16.8%；文本对齐：居中；边距：2%；}
.first{左边距：0px；背景：蓝色；高度：50px；}
.last{右边距：0px；}
0
1.
4.
6.
9

一个

id

选择器不仅仅是一个

类

选择器，因此将在中的最后一个应用

id

s必须是唯一的，因此您的HTML无论如何都是无效的。而是在整个过程中使用类

<div class="num first">0</div>
<div class="num">1</div>
<div class="num">4</div>
<div class="num">6</div>
<div class="num last">9</div>

0
1.
4.
6.
9

id样式设置优先于

类

尝试添加

！重要信息

到类的每个CSS属性的末尾，以对其进行优先级排序

.first {margin-left: 0px !important; background: blue !important; height: 50px !important;}
.last {margin-right: 0px !important;}

这不管用吗

CSS

* { 
    padding: 0px; 
    margin: 0px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    overflow:hidden;
}

div {
    float: left;
    background: pink; 
    width: calc(92%/5);
    text-align: center;
    margin-right: 2%;
}

.last {
    margin-right: 0;
}

---

您的总%s加起来占页面宽度的104%。（16.8%x5）+（2%x5）+（2%x5）=104%，对于固定的类/ID情况。计算（和生命）的一般规则是ID是唯一的。你应该这样做，这是对css特定性的一个很好的解释

！重要信息

是解决方案的大锤，没有任何细微差别，一旦使用了它，当问题再次出现时，就无法将其加倍。这应该是万不得已的办法。那些反对票怎么了？这可能不是最好的解决方案，但它仍然是有效的CSS。