如何用新类覆盖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孩子li.

改变的目标是li与班级noborder.