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

StackOverflow https://stackoverflow.com/questions/809385

質問

アットルールを使用すると、アットルールイベント中に要素（印刷、モバイルデバイスなど）のルールセットを持つことができます。しかし、特定のセレクターについてはどうですか？

大規模なサイトのサブページで作業しているため、すべてのページでマスタースタイルシートを使用する必要があります。スタイルルールは、マスタースタイルシートのルールに勝る場合があります。これを克服するには、「＃mypage #content blah blah」を追加する必要があります。すべてのルールの前に、CSSがより具体的になるようにします。それは非常に速く乱雑になります。私がやりたいのは次のようなものです：

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

作成するルールは、作業中のページのセクションのIDに含まれるようにします。

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

簡単なものが足りませんか？

明確化：

申し訳ありませんが、シンプルにしようとすると、私はあまりにもあいまいでした...

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

私は自分のセクションだけのスタイルシートに自由を持っています。私のルールが誤ってグローバルスタイルシートを上書きしたくないので、グローバルスタイルシートがスタイルシートを上書きするのを避けるために、ルールに非常に長いセレクターを使用する必要を避けたいです。たとえば、

と言いたい場合

＆quot;すべてのテーブルに黒い境界線があります＆quot;

サイドバーのテーブルの周りに黒い境界線を配置するリスクがあります。しかし、私が言うなら

＆quot; div #content内のすべてのテーブルに黒い境界線があります＆quot;

これは、より具体的なルールがない限り機能します。

今、各ルールを調べてセレクターの長いトレインを追加して、各ルールが自分のセクションでのみ機能するようにしますが、それは本当に魅力的でも楽しいことでもありません。上記の例のように、すべてのルールをより大きなルール内にネストして、メインルールを作成できることを望んでいました。

  #content {

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



 p {
     border: pink;
   }

特異性を一度宣言するだけで、そのメインルール内のすべてのルールがカバーされるようになります。

役に立ちましたか？

解決

私が読んだことから、次のルールは法案に適合し、深さは1レベルに過ぎず、私が見たり使用したりしたほとんどのWebサイトの率直な典型です：

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

これは、コンテンツのIDを持つ要素の下にあるdivのみに影響します。

「グループ化」する方法はありません。これらのルール：

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

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

他のヒント

完璧なソリューションではありません。PHPベースのサーバー側の処理を使用するためですが、これで十分かもしれません：

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

非常によく似た質問（タイトルがかなり悪い）が尋ねられました少し前に。

最も一般的な回答は Shaun Inman'sサーバー側プリプロセッサ（現在は CSSCacheer ）。

私の提案は Sass です。

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

＆quot;！important＆quot;で他のスタイルシートを確認できます。宣言：

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

詳細： http://www.w3.org/ TR / CSS2 / cascade.html＃important-rules

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

lesscss 'Webサイト（および個人的な経験）によると、次のようなCSSルールをネストできます。

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

そしてコマンドラインユーティリティ 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;
}

less を使用すると、フォントサイズなどの変数を使用できるため、変更がはるかに高速になります。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top