我怎样才能避免重复使用css而不使用！important？

Ok here is the thing, I have a Bootstrap navbar which I'm trying to give some style, lets say this is the portion of code you must focus on

好的就是这个,我有一个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>

if I do this

如果我这样做

  .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;
    }
  }

the background and color part doesn't work, I have to put !important in both cases, the issue I have is that once you do focus on any of those links, the .active is called, so I had to do this

背景和颜色部分不起作用,我必须把!重要的两种情况,我的问题是,一旦你专注于任何这些链接,.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;
    }
  }

and as you see guys, that code is exactly the same code but with the difference of the .active how can I compile that code into one code only for that part, and with out using !important

正如你所看到的那样,那些代码是完全相同的代码,但是.active的区别在于如何将该代码编译成仅用于该部分的一个代码,并且不使用!important

1 个解决方案

#1

Add greater specificity to the .hover-nieve selector. e.g. body .hover-nieve { ... /* Rules here */ } and your need for !important should no longer be necessary.

为.hover-nieve选择器添加更大的特异性。例如body .hover-nieve {... / *这里的规则* /}和你的重要性应该不再需要了。

Example:

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;
  }
}