Question

好的就是这个，我有一个Bootstrap导航栏，我试图给出一些风格，让我们说这是你必须关注的代码部分

<div class="collapse navbar-collapse">
   <ul class="nav navbar-nav">
     <li class="active"><a class="hover-nieve" href="#/lines">Sports <span class="sr-only">(current)</span></a></li>
     <li><a class="hover-nieve" href="javascript:void(0);">Poker</a></li>
     <li><a class="hover-nieve" href="javascript:void(0);">Casino</a></li>
     <li><a class="hover-nieve" href="javascript:void(0);">Horses</a></li>
     <li><a class="hover-nieve" href="javascript:void(0);">Info</a></li>
   </ul>
</div>

如果我这样做

  .hover-nieve {
    background: get-color(nieve);
    color: get-color(night);
    transition: all .4s ease;

    &:hover,
    &:focus {
      background: get-color(nieve);
      box-shadow: inset 0 -4px 0 0 lighten(get-color(rose), 5%);
      color: get-color(rose);
      margin: 0;
    }
  }

background和color部分不起作用，我必须在两种情况下都放!important，我的问题是，一旦你专注于任何这些链接， .active被调用，所以我必须这样做

  //when .active
  .active .hover-nieve {
    background: get-color(nieve);
    color: get-color(night);
    transition: all .4s ease;

    &:hover,
    &:focus {
      background: get-color(nieve);
      box-shadow: inset 0 -4px 0 0 lighten(get-color(rose), 5%);
      color: get-color(rose);
      margin: 0;
    }
  }

  // normal behavior
  .hover-nieve {
    background: get-color(nieve);
    color: get-color(night);
    transition: all .4s ease;

    &:hover,
    &:focus {
      background: get-color(nieve);
      box-shadow: inset 0 -4px 0 0 lighten(get-color(rose), 5%);
      color: get-color(rose);
      margin: 0;
    }
  }

正如你所看到的那样，那些代码完全相同的代码，但与.active的不同之处在于如何将该代码编译为仅针对该部分的一个代码，并且不使用!important

Answer 1

为.hover-nieve选择器添加更高的特异性。例如body .hover-nieve { ... /* Rules here */ }并且您不再需要!important。

示例：

body .hover-nieve {
  background: get-color(nieve);
  color: get-color(night);
  transition: all .4s ease;

  &:hover,
  &:focus {
    background: get-color(nieve);
    box-shadow: inset 0 -4px 0 0 lighten(get-color(rose), 5%);
    color: get-color(rose);
    margin: 0;
  }
}

如何避免重复使用css而不使用！important？

1 个答案: