CSSセレクタルール - セレクタ内のすべての要素のルールセット？

Question

at-rulesでは、at-ruleイベント（印刷、モバイルデバイスなど）中に要素のルールセットを作成することは可能ですが、特定のセレクタについてはどうでしょうか？

私は大きなサイトのサブページで作業しており、自分のページにマスタースタイルシートを使用する必要があります。スタイル・ルールは、マスター・スタイル・シートからルールによって切り詰められることがあります。これを克服するために、私はCSSをより具体的にするために、すべてのルールの前に "#mypage #content blah blah"を追加する必要があります。それは非常に厄介になります。私が作る任意のルールは私が働いているページのセクションのIDに含まれるように

@#mypage { 
     div { 
      border: 1px solid #000; 
      } 
     div p { 
      color: #00f; 
      } 
     } 

：私は何を好むことのようなものです。

私のページがテンプレートフレーム内にあるので（私が理解する限り）@namespaceを使用することはできません（したがって、マスタースタイルシートが必要です） namespace（my-page-url）私のスタイルシートはマスタースタイルシートを上書きします。

は、私は、単純な何かが足りないのですか？

---

明確化：

申し訳ありませんが、私は単純に滞在する私の試みで、私はあまりにも漠然とした推測...

私はより多くの内側に配置されるページのコンテンツを開発していますグローバルスタイルシートを持つ一般的なテンプレート（マストヘッド、サイドバーナビゲーションなど）であり、そのコンテンツについては何も制御できません。

私は自分のセクションのスタイルシートでいくつかの自由を持っています。自分のルールが間違ってグローバルスタイルシートを上書きすることを避け、グローバルスタイルシートがスタイルシートを上書きするのを避けるために、本当に長いセレクタをルールに使用する必要がないようにしたい。私は

「すべてのテーブルが黒の境界線を持っている」

を言いたい場合たとえば、私はサイドバーにいくつかのテーブルの周りに黒い境界線を置く危険性があります。しかし、私が言っている場合

これが唯一の限り、彼らはより具体的なルールを持っていないとして働いてい

「のdiv #content内のすべてのテーブルには、黒の境界線を持っています」。

今、各ルールが機能し、自分のセクションのみが確実に機能するように、長いルールのセレクタを追加できますが、それは本当に魅力的で楽しいものではありません。私は一度だけ私の特異性を宣言する必要があることので

#content { 

    //and place all of my style rules inside of that: 



p { 
    border: pink; 
    } 

と：私はメインのルールを持つことができるように、私は、私が巣可能性上記の私の例のように、より大きなルールの私のルールのすべての内部、ことを期待していましたその主なルール内のすべてのルールをカバーします。

Answer 1

は、法案に合う唯一のレベルの深さである、と私は見てきたほとんどのウェブサイトの率直典型的であり、使用：

#content div { 
    ... your rules ... 
} 

ことでしょうコンテンツのidを持つ要素の下にあるだけで効果のdiv

手立てように「グループ」これらのルールはありません。：

これは素晴らしいことですが、悲しいかな、それは書かれた方法ではありません。

Answer 2

他のスタイルシートは、 "！重要な」宣言：

div { 
    border: 1px solid #000 !important; 
    } 
div p { 
    color: #00f !important; 
    } 

さらに詳しい情報：私は、次のルールを読んだからhttp://www.w3.org/TR/CSS2/cascade.html#important-rules

Answer 3

ない、それはPHPベースのサーバー側の処理を使用していますが、これはあなたのために十分であるかもしれないので、最適なソリューション、：

http://www.shauninman.com/archive/2007/06/27/css_server_side_pre_processor

Answer 4

very similar question（かなり貧弱タイトルを）頼まれましたずっと前。

最も一般的な回答はShaun Inman's server-side preprocessor（現在はCSSCacheerに置き換えられました）でした。

私の提案はSassでした。

どちらの場合でも、これはバニラCSSの欠点です。

Answer 5

CSSエンジンを使用してこれを行う方法があります。 less（node.jsライブラリ）。 lessで

#header h1 { 
    font-size: 26px; 
    font-weight: bold; 
} 
#header p { 
    font-size: 12px; 
} 
#header p a { 
    text-decoration: none; 
} 
#header p a:hover { 
    border-width: 1px; 
} 

に

#header { 
    h1 { 
    font-size: 26px; 
    font-weight: bold; 
    } 
    p { font-size: 12px; 
    a { text-decoration: none; 
     &:hover { border-width: 1px } 
    } 
    } 
} 

とコマンドラインユーティリティlessを使用して、このコンパイルすることができます：lesscssのウェブサイト（と個人的な経験）あなたはこのような巣のCSSルールが可能によると

また、フォントサイズなどの変数を持っているので、変更がずっと速くなります。