Css忽略了类规则

时间:2014-04-03 14:57:53

标签: html css css-specificity

非常基本的问题,但似乎我的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>

3 个答案:

答案 0 :(得分:10)

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>

答案 1 :(得分:0)

这不起作用吗?

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

答案 2 :(得分:-1)

id样式优先于class

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

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