Question

我刚开始在30分钟左右开始看BEM，而且我用它打了第一个路障。

我正在使用twitter bootstrap构建一个项目，我决定在我的样式中使用BEM架构，我尝试在堆叠列表上覆盖bootstraps悬停效果，但这不会起作用。

<ul class="nav nav-stacked side-nav">
    <li class='side-nav__item'><a href="#">Link</a></li>
    <li class='side-nav__item'><a href="#">Link</a></li>
</ul>

以下是我的风格

.side-nav {
   position: relative;
   &__item {
     a {
        &:hover {
          font-weight: bold;
          background: none;
        }
     }
  }
}

悬浮效果不会消失，除非我强加!important，我老实说看到这样的问题即将发生，但我决定尝试一下。

我发现问题与bootstraps特异性有关，因为我的样式在bootstraps样式下呈现为悬停效果。

找到工作问题的链接：https://jsfiddle.net/3321L7xL/

Answer 1

问题的关键是specificity of your selectors。您当前的选择器

.side-nav__item a:hover { ... }

具有0.0.0.2.1的特异性。这种特异性必须与引导程序中选择器的特异性相同或更高，以覆盖它们的规则。当选择器的特异性相同时，则优先顺序（最后一条规则获胜的地方）。

要解决此问题：使您的选择器更具体。有很多方法，但你现在的标记是一个：

<强> HTML

<ul class="nav nav-stacked side-nav">
  <li class='side-nav__item'><a href="#">Link</a></li>
  <li class='side-nav__item'><a href="#">Link</a></li>
</ul>

<强> CSS / LESS

.side-nav {
  position: relative;

  .side-nav__item {
    a {
      &:hover {
        font-weight: bold;
        background: none;
      }
    }
  }
}

这导致.side-nav .side-nav__item a:hover的选择器的特异性为0.0.0.3.1，高于您尝试覆盖的规则。

BEM和覆盖引导样式

1 个答案: