如何用新类覆盖CSS代码？

Question

我正在尝试覆盖从某些先前代码中放置边框的CSS样式。我做错了什么？

/* previous code */
@media (min-width: 768px) {
  .navbar-nav>li {
    border-width: 1px 1px 1px 1px;
  }
}

/* code to override and remove border */
@media (min-width: 768px) {

  .navbar-nav>li .noborder {
    border-width: 0px 0px 0px 0px;
  }
}

<div class="navbar-collapse collapse">
  <ul class="nav navbar-nav navbar-left noborder">  //this should override the previous code
    <li>
      <img class="img-responsive" src="picture.jpg">
    </li>
  </ul>
</div>

Answer 1

您需要删除li和.noborder定义之间的空格。

/*                                    v-----------< The space here */
@media (min-width:768px){navbar-nav>li .noborder{      /* Before change */
@media (min-width:768px){navbar-nav>li.noborder{       /* After change  */

您的初始代码的目标是.noborder的{​​{1}}子项。

此更改的目标是li，其类别为li。

Answer 2

只做

.noborder img {border:none;}

如果这不起作用，那么

.noborder img {border:none!important}