2017-11-21 16 views
0

スタイリングのセレクタメソッドを使用しているときにCSSを継承する方法cssセレクタを使用しているときにCSS継承を使用していますか?

私は単にこのようにすることができます:私は単純にラベルをスタイルする場合は、このスタイル{スタイル}。しかし、私は私のCSSでどのようにしようとしているように、私はクラス "usethis"からスタイルを継承しようとしているような別のクラスのスタイルを継承したい、このようなスタイルのラベルを..

/* Make second-level headers green */ 
h2 { color: green; } 

/* ...but leave those in the sidebar alone so they use their parent's */ 
#sidebar h2 { color: inherit; } 

#sidebar h2の場所を除いて、私は#sidebar 'my class name'を置くことを除いて、そうしたいと思っていますか? CSS値の

.usethis{ 
 
color:red; 
 
font-size:12px; 
 
} 
 

 
.stylethis label .usethis{ 
 
color:inherit; 
 
font-size:inherit; 
 

 
}
<div class="stylethis"> 
 

 
<label>jay chacko</label> 
 

 
</div>

+0

これはCSSの仕組みではありません。 – SLaks

+0

https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables –

+0

これはOOPSではなくCSSです。 私はあなたが望むものを理解できません。 明確にしてください –

答えて

1

継承のみDOM構造(またはHTMLあなたがする場合)に基づいて、親から子へ動作します。 CSSの継承のこの作業例:

<div class="parent"> 
    <div class="child"></div> 
</div> 
.parent { 
    color: red; 
} 
.child { 
    color: inherit; 
} 

私はあなたの質問の一部を誤解しているかもしれませんが、あなたは別のものに1つのセレクタから値を「継承」することができた場合、あなたが求めている場合は、答えはいいえになります。 CSSセレクタで使用される変数をサポートするSASSやLESSなどのプリプロセッサを使用している場合を除きます。 (そして、我々は、上記のように、その親のスタイルを継承する子要素について話している場合を除き)ご提供された例については詳しく説明し

、あなたはサイドバー内<h2>をラップし、以下のようなサイドバーのフォント色継承することができる:

h2 { 
 
    color: green; 
 
} 
 
.sidebar { 
 
    color: red; 
 
} 
 
.sidebar h2 { 
 
    color: inherit; 
 
}
<h2>Regular H2</h2> 
 

 
<div class="sidebar"> 
 
    <h2>Sidebar H2</h2> 
 
</div>

+0

よかったです。それは意味があります –

+0

これは助けになることができてうれしいです:o)CSS継承がどのように働くかについてもっと知る必要があれば、[CSSカスケードと継承に関するMDNの説明](https://developer.mozilla .org/en-US/docs/Learn/CSS/Introduction_to_CSS/Cascade_and_inheritance) – agrm

0

それは私があなたの問題を理解していない、非常に可能性がありますが、おそらくあなたは、あなたが要素に複数のクラスを持つことができることを知っておく必要があります。あなたがしなければならないのは、スタイルが必要な他のオブジェクトのクラスを追加することだけです。

<div class="stylethis usethis"> 
    <label>jay chacko</label> 
</div> 

これは、あなたが、あなたがこの

.stylethis.usethis { 
    /* styles here */ 
} 
のようなこれらのクラスの両方で唯一の要素をターゲットにCSSセレクタを使って、それを取り戻すためにあなたのCSSを微調整することができ上書きしたくなかったスタイルをオーバーライドする場合