css - 引导继承

Question

我从未创建或编辑过 CSS。

现在我正在使用引导程序，我想在具有不同颜色的多个场景中使用 hero-unit。

我真的不想编辑原始 CSS 中的任何内容。我只想继承 hero-unit 并创建具有不同颜色的新类。

甚至可能吗？

Answer 1

是的，这不是 Bootstrap 特有的，但应该让你开始想要什么。在你的 CSS 中做这样的事情：

/* Defined in bootstrap.css or wherever */
.hero-unit {
    background-color: Black;
}

/* These are yours in your styles.css */
.hero-unit.red {
    background-color: Red;
}

.hero-unit.green {
    background-color: Green;
}

然后您可以在 HTML 中执行此操作：

<div class="hero-unit red"></div>
<div class="hero-unit green"></div>

您可以在 jsFiddle 上使用此示例 - http://jsfiddle.net/RrhyC/

Answer 2

这是一篇关于特异性和继承的文章。 http://www.smashingmagazine.com/2010/04/07/css-specificity-and-inheritance/

本质上，有一个积分系统，它基于您在样式化的元素方面的具体程度。具有较高点数的定义具有较高优先级的属性，覆盖较低优先级的属性。

.carousel-indicators .active {
  /*defined in bootstrap*/
}

.carousel-indicators .active {
  /*my definitions are ignored because it's equal in points to 
  the one defined in bootstrap.*/
  background-color: red;
}

让你的定义坚持下去的简单方法是将它们内联在你的 html 中，

<div class="carousel-indicators" style="background-color: red;">

或者将“！important”附加到您的属性中，以便它们获得更高的优先级。

.carousel-indicators .active {
  background-color: red !important;
}

但它们通常被认为是不好的做法。

因此，您可以通过将更多类应用到您的 div 来更“具体”。

在 HTML 中：

<div class="carousel-indicators custom">
  <div class="active>
  </div>
</div>

在 CSS 中：

.carousel-indicators.custom .active{
  background-color: red;
}

这将从 .carousel-indicators 继承定义的值，同时为 .carousel-indicators.custom 中的值赋予更高的优先级并防止它们被覆盖。

但是，如果您在 SCSS 中使用：

.carousel-indicators .custom .active {
   background-color: red;
}

它将在 HTML 中寻找这个目标：

<div class="carousel-indicators">
   <div class="custom">
     <div class="active">
     </div>
   </div>
</div>

这可能不是你想要的。