4

@-rule を使用すると、その @-rule イベント中に要素 (印刷、モバイル デバイスなど) のルールセットを持つことができます。しかし、特定のセレクターについてはどうでしょうか?

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

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

私が作成したすべてのルールが、私が取り組んでいるページのセクションの ID に含まれるようにします。

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

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

説明:

申し訳ありませんが、私は単純にしようとして、漠然としすぎていたと思います...

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

私のセクションだけのスタイルシートにはいくらかの自由があります。ルールによってグローバル スタイルシートが誤って上書きされることは望ましくありません。また、ルールに非常に長いセレクターを使用して、グローバル スタイルシートがスタイルシートを上書きするのを回避したいと考えています。たとえば、私が言いたいのなら

「すべてのテーブルに黒い境界線があります」

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

「div #content 内のすべてのテーブルには黒い境界線があります」

これは、より具体的なルールがない場合にのみ機能します。

これで、各ルールを確認し、一連の長いセレクターを追加して、各ルールが自分のセクションでのみ機能することを確認できますが、これはあまり魅力的でも楽しいことでもありません。上記の例のように、すべてのルールをより大きなルールの中に入れ子にして、主なルールを作成できるようにしたいと考えていました。

  #content {

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



 p {
     border: pink;
   }

そのため、具体性を宣言する必要があるのは 1 回だけで、メイン ルール内のすべてのルールがカバーされます。

4

5 に答える 5

2

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

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

于 2009-04-30T22:47:32.003 に答える
1

私が読んだことによると、次のルールは法案に適合し、深さは 1 レベルのみであり、率直に言って、私が見て使用したほとんどの Web サイトの典型です。

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

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

これらのルールを次のように「グループ化」する方法はありません。

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

それはいいことですが、残念ながら、それは書かれた方法ではありません。

于 2009-04-30T22:24:10.280 に答える
0

lessCSSエンジン（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できるため、変更がはるかに高速になります。

于 2013-03-02T23:58:51.313 に答える