2012-03-07 9 views
1

私はそれが可能だと思っていましたが、誰も私にはそうではないと言います。スタイリングされたID fooでdivの中CSS - コンテキストはスタイリングを使用しましたか?

div#foo { 
h2 { 
    color: #F42 
} 
p.bar { 
    font-size: 12px 
} 
} 

だからのみH2とp.bar:

は、私のような私のcssファイルのコンテキストスタイリングをしたいです。あるいはこれはLESSや他の同様のライブラリでのみ可能ですか?

おかげ&種類について、 Jurik

+3

そのようなCSS宣言をネストすることはできません。それらは有効ではありません。うん、あなたはそれをそうするためには、あまり必要はありません。 –

答えて

1

これは、あなたがCSSのスーパーセットですSCSSまたはLESS(私はSASS/SCSSを使用することをお勧め)、

LESS/SASS-SCSSはあなたと動的なCSSを記述することができます使用する必要がある理由だと、純粋なCSSでは不可能です私はあなたがSASS/SCSS

+1

dotlessという.NETポートもあります。私はちょうどプロジェクトに接続し、2分以内に作業しました!クライアント側のコードは不要 –

+0

nice! SASS/COMPASSには、デフォルトのサーバー側の自動コンパイルがあります(監視するフォルダとどこに配置するかを指定するだけです); DI dunno ...私はJSコンパイルがあまり好きではありません。 ):\ – VAShhh

+0

ありがとう - まだCSS3ではないと聞きました... wc3を非難します:S – Jurik

4

これは、標準のCSSで可能ではないが、2クラスは以下のように設定する必要があります:

div#foo h2 {} 
div#foo p.bar {} 
0

ことは可能ですが、次のように:

div#foo h2 { 
    /* styles go here */ 
} 

div#foo p.bar { 
    /* styles go here */ 
} 
0

上記の内容は少し変更されたものです:

div#foo h2 { color: #F42; } 
div#foo p.bar { font-size: 12px } 

私は本当にそれに何の利益もありません。

+0

2.000以上のラインを持つCSSファイルを入手すると、コンテキストの使用率が向上します。これはエンジニアの概要とコードの削減です。 – Jurik

+0

@Jurik:私はそのような大量のCSSファイルを持っていて、シンプルな組織はその場所にあるすべてを簡単に見つけることができます。唯一の唯一の利益は、繰り返しのセレクタの縮小ですが、PCブラウザで見ることのできる標準的なWebページでは、これは最小の利益です。ターゲットオーディエンスがモバイルの場合(そのような利得が見られる場合)、間違い#1は2k行のCSSファイルを必要とするデザインであると言います。 –

0

Lessみましょうあなたが説明したものをほとんど行うだけでなく、使用のようないくつかの他のクールなものをお勧めする主な理由である易さ、this比較です見てみましょう

チェックアウトCOMPASSの変数CSSなど

もちろん、コンパイルできるようになると、これまでの回答で示唆されている有効なCSSに変換されます。まだ一見IMHOの価値がある。

+0

問題があります...少なくともエンジニア向けのスクリプトは簡単ですが、コンパイルされます。 – Jurik

0

はい、でも...

div#foo h2 { 
    color: #F42 
} 
div#foo p.bar { 
    font-size: 12px 
} 

を離れたが、私は少し変えすぎたいと思います:

#foo h2 { 
    color: #F42 
} 
#foo p.bar { 
    font-size: 12px 
} 

あなたがIDを使用しているあなたはIDのための前に何も言わないする必要はありませんので、ユニークです

+0

これらはHTMLページごとに一意ですが、このCSSは複数のページで使用でき、 'foo'は別の要素のIDになります。 – Curt

+0

はい、私が言っていたことは、例えば、 'span#foo'と' div#foo'を持つことができなかったということでした。 – MCSI

+0

ありがとうございますが、主な焦点はCSSで文脈を使う可能性にありました。不可能です :) – Jurik

0

デフォルトCSSテクニックを使用することはできません。

しかし、sasslessを使用することも可能です。

ご質問のコードは、上記の両方のライブラリで動作します。

関連する問題