css - CSS 中宽度 :100%! important 和高度 :100%! important 有什么用？

Question

.full-block {
  display: block;
}

h1 {
  margin-left: 10px;
  font-family: "Open Sans", Arial, sans-serif;
}

.block-1 {
  width: 100%;
  height: 100%;
  background-color: #000;
  display: inline-block;
  color: #fff;
}

.block-2 {
  width: 100%!important;
  height: 100%!important;
  background-color: #6a9e77;
  display: inline-block;
}

<div class="full-block">
  <div class="block-1">
    <h1>BLOCK 1</h1>
  </div>
  <div class="block-2">
    <h1>BLOCK 2</h1>
  </div>
</div>

如您所见，即使使用了 !important，这两个 block 的高度和宽度也是相同的。那么实际上 width:100%!important 和 height:100%!important 在 CSS 中的用途是什么？

Answer 1

当您在 CSS 中有多个“宽度”或“高度”规范并且想要覆盖使用的一个时，使用“!important”。否则，默认使用最新规范。偏好是不需要“!important”，但在那些特殊情况下它是存在的。另请注意，某些较旧的浏览器不支持它(例如 IE6)。

例如:

.obj
{
 width:600px;
 width:800px; /* This one is used*/
}

但是使用 !important...

.obj
{
 width:600px !important; /* This one is used */
 width:800px;
}