元素添加class,页面不显示

作者: dreamfly 分类: css 发布时间: 2015-03-31 15:53

有的时候我们copy别人的代码,然后自己修改样式,这时候就会容易犯错误。

比如:

<input class="input1" type="text" name="email" id="email" value="" />

当我们想要新添加一个样式,比如添加一个class form-control

.form-control{
       display: block;
      width: 100%;
      height: 34px;
      padding: 6px 12px;
      font-size: 14px;
      line-height: 1.42857143;
      color: #555;
      background-color: #fff;
      background-image: none;
      border: 1px solid #ccc;
      border-radius: 4px;
      -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
      box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
      -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
      -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
      transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}

我们可能会这样写

<input class="input1" type="text" name="email" id="email" value="" class="form-control"/>

我们刷新页面的时候,发现页面没有添加form-control.我们不自觉的认为这是缓存,结果却不是,我们这是后就崩溃了,其实问题的原因就是前面有了input1这个class,如果我们想添加class,直接添加到前面那里就行了。。

<input class="input1 form-control" type="text" name="email" id="email" value="" />

最后想说的就是“细节决定成败”,当我们看不出问题的时候,不如重新自己敲打一遍代码,问题就解决了.

如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!