css - ブートストラップ継承

Question

css を作成または編集したことはありません。

今、私はブートストラップを使用しています。さまざまな色の複数のシナリオでヒーローユニットを使用したいと考えています。

元のcssで何も編集したくありません。ヒーローユニットを継承して、別の色の新しいクラスを作りたいです。

それは可能ですか？

Answer 1

これは、特異性と継承に関する記事です。 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>

これはあなたが望むものではないかもしれません。