Css忽略了类规则

Question

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

http://jsfiddle.net/VabWL/11/

这使它落到了最后。请问有人能在这看到我做错了吗？

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

Answer 1

id选择器比class选择器更specific，因此最后会应用于cascade。

id必须是唯一的，因此您的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>

Answer 2

这不起作用吗？

JSfiddle Demo

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

Answer 3

id样式优先于class。

尝试将!important添加到类的每个CSS属性的末尾以确定其优先级。

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