为什么在 css 中使用重要是不好的做法？ [复制]

【问题标题】：Why using important in css is Bad practice? [duplicate]为什么在 css 中使用重要是不好的做法？ [复制]
【发布时间】：2018-07-19 19:46:13
【问题描述】：

HTML：

<div class="collapse navbar-collapse navbar-ex1-collapse">
  <ul id="menu-primary" class="nav navbar-nav menustyle">
    <li><a href="#">Home</a></li>
  </ul>
</div>

CSS：

.menustyle a:before{
  position: absolute;
  top: 0;
  left: 0;
  content: "";
  height: 2px;
  background-color: #fff;
  width: 0%;
}
.nav > li > a:hover .menustyle a:before{
  width: 100%!important;
}

这在我使用 Bootstrap 时不起作用，但在没有 bootstrap 时可以工作。

【问题讨论】：

标签： html css twitter-bootstrap-3

【解决方案1】：

尝试使用.nav > li > a:hover:before 而不是.nav > li > a:hover .menustyle a:before...

.nav > li > a:hover .menustyle a:before....表示它将针对<a>标签内的所有.menustyle a元素。

.nav > li > a:hover:before {
  width: 100%!important;
}

Fiddle Link

【讨论】：

谢谢，@Bhuwan 它正在处理您的建议。 width: 100% 为不同的
赋予不同的宽度。如何给出等效宽度。你能帮我吗

@RameshKR 你想给所有 ..?

@RameshKR - 这是一个完全不同的问题，应该单独提出。很好的答案和很好的解释，Bhuwan，+1。

因为我现在不能问问题 StackOverflow 限制了我。

【解决方案2】：

I have modified you code. If you want hover like this.

    <style type="text/css">           
        .menustyle a{
            position: relative;
        }
        .menustyle a:before{
                position: absolute;
                top: -5px;
                left: 0;
                content: "";
                height: 2px;
                background-color: #ff0000;
                width: 0%;
            }
        .menustyle > li > a:hover:before{
            width: 100% !important;
        }
    </style>
    <div class="collapse navbar-collapse navbar-ex1-collapse">
        <ul id="menu-primary" class="nav navbar-nav menustyle">
            <li><a href="#">Home</a></li>
        </ul>
    </div>

【讨论】：

但是width:100%并不适合所有
..如何给等宽？

可以使用margin: 0 15px;显示：内联块；

在 css 中。或与我分享链接，以便我更好地为您解释。

我在没有引导程序的情况下使用它，所有 li 的宽度都是相等的，但是当我使用引导程序时，宽度会有所不同