使用 less 覆盖引导程序时的特异性答案

【问题标题】：Specificity when overriding bootstrap using less使用 less 覆盖引导程序时的特异性
【发布时间】：2014-06-21 17:07:35
【问题描述】：

我正在使用 less 自定义引导程序。我想给 .navbar 添加一个阴影。我的解决方案如下：

   //Import of bootstrap core navbar - second as to save specificity 
   @import "bootstrap/navbar.less";    

   //Overrides:
   .navbar {
      position: relative;
      min-height: @navbar-height; // Ensure a navbar always shows (e.g., without a .navbar-brand in collapsed mode)
      margin-bottom: @navbar-margin-bottom;
      border: 1px solid transparent;
      border-bottom: 1px solid #FFF;

      -moz-box-shadow: 0px 3px 10px #888;
      -webkit-box-shadow: 0px 3px 10px #888;
      box-shadow: 0px 3px 10px #888;

      //Prevent floats from breaking the navbar
      &:extend(.clearfix all);

      @media (min-width: @grid-float-breakpoint) {
      border-radius: @navbar-border-radius;
      }
   }

这样我不会修改引导程序的原始源，并且更新引导程序很容易，但是新的导航栏类比所有引导程序类具有更高的特异性。所以如下：

<div id="navigationbar" class="navbar navbar-default navbar-static-top" ng-cloak ng-controller="NavController">

导航栏边框半径将覆盖导航栏静态顶部，结果是圆角。

如果我在定义自己的类之后导入 bootstrap/navbar.less，它确实可以工作。但是有更好的解决方案吗？

【问题讨论】：

标签： html css twitter-bootstrap less

【解决方案1】：

我想知道您的问题是否真的与 CSS 特异性有关。您的 Less 代码将从上到下读取（仅适用于最后声明获胜的变量）。

Bootstrap 首先定义 .navbar 类，然后定义样式类 (.navbar-default) 和位置类 (.navbar-static-top)。

当.navbar-default 覆盖.navbar 类的某些样式时，您可以通过在.navbar-default 之后再次定义.navbar 类来撤消此覆盖。

据我了解，您只需要以下 Less / CSS 代码：

 .navbar.navbar-default {
      -moz-box-shadow: 0px 3px 10px #888;
      -webkit-box-shadow: 0px 3px 10px #888;
      box-shadow: 0px 3px 10px #888;
 }

演示：http://www.bootply.com/VhEmBcAYhY

由于 Bootstrap 导航栏类根本没有声明 box-shadow 属性，您可以在您的 Less 代码中的任何位置添加此代码。

这段代码位于 bootstrap.less 甚至 navbar.less 的末尾，位置不错。或者创建一个 custom.less 文件并在 bootstrap.less 的末尾导入。

【讨论】：

【解决方案2】：

我发现的最简单的事情，也是我们在工作中所做的，就是不使用 Bootstrap LESS 文件，而是使用缩小的 CSS。由于您只是覆盖 Bootstrap 样式，而不是更改源样式，因此会更容易。

使用 LESS，因为您在样式中嵌套样式，您会发现如果样式没有完全按照 Bootstrap 的方式嵌套（因为您试图覆盖它们），它们的样式可能更具体，因此优先于您的样式。

【讨论】：