css - CSSセレクターのネスト

Question

セレクター内にセレクターをネストすることは可能ですか？私はこのように見えるスタイルをたくさん持っています：

#header h1{
  ...
} 
#header img{
  ...
}
#header form{
  ...
}

そして、私はそれらを凝縮して、次のように見せたいと思います。

#header{
  h1{
    ...
  }
  img{
    ...
  }
  form{
    ...
  }
}

読みやすさを向上させるために。これは単なる古いCSSで可能ですか？

score 2 · Accepted Answer

バニラCSSにはありませんが、ネストされたセレクターを使用できるLESSのようなCSSにコンパイルする言語があります。

私が選んだライブラリはSassで、これは現在Railsアセットパイプラインに統合されています。

score 2 · Accepted Answer

いいえそうではありません。ただし、SASSやLESSなどのプリプロセッサ（最も人気のあるものだけに名前を付けるため）を使用する場合は、そうです。

必要なものに応じて、そのうちの1つを調べる必要があります。ネストセレクターだけでなく、変数、ミックスイン、ループ、その他の便利なものを導入することで、作業を大幅に簡素化できるため、間違いなく価値があります。

score 0 · Accepted Answer

0

いいえ、プレーンCSSでは不可能です。Sass以下のようなものが必要です。

于 2012-06-18T13:50:31.637 に答える

score 0 · Accepted Answer

いいえ、古いCSSでは不可能です。

しかし、 LESSまたはSassで行うことができます。これら2つはCSSにコンパイルされます。

Sassは、必要な例のようにインデントできるCSSを生成します。

#header{}
   #header h1{
     ...
   }
   #header img{
     ...
   }
   #header form{
     ...
   }

score 0 · Accepted Answer

あなたは次のようなものを見つけるかもしれません

@-moz-document url-prefix() {
    .myDefinition {
    }
}

でも。これらはFirefoxによって解析され、FirefoxのみのCSSハックを提供するために使用できますが、これらがどれほど有効で標準に準拠しているかはわかりません。

5 に答える 5