非常基本的问题,但似乎我的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>
答案 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)
这不起作用吗?
<强> 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;}