0

これは非常にばかげた質問かもしれませんが、私は何も見つけることができませんでした。

たとえばh1、特定のページにタグを定義したいので、次のように記述します。

body.certain_page h1 {
  font-size: 12px;
}

ここまでは順調ですね。このスタイルを複数のページに適用する場合は、次のように記述します。

body.certain_page h1, body.other_page h1 {
  font-size: 12px;
}

このように多くのルールを定義すると、非常に面倒になります。次のように書くと、はるかに簡単になります。

body.certain_page, body.other_page {
  h1 {
    font-size: 12px;
  }
}

メディアクエリのように。なぜそれが不可能なのですか？または、何か不足していますか？

4

3 に答える 3

6

いいえ、それは今では不可能です。それが、SASS がネストを機能として挙げている理由です。

于 2013-10-24T15:10:18.417 に答える
4

@destroyが既に回答したように、CSS を使用してセレクターをネストすることはできません。そのため、開発者はLESSおよびSASSプリプロセッサーを選択します。CSS を最小化するためにできる最善の方法は、次のような共通プロパティをグループ化することです

div, p, i {
   color: #f00;
   /* All the three elements will have the same color */
}

親セレクターで基本プロパティを宣言することもできるため、簡単に継承でき、それぞれで何度も呼び出す必要はありません。

body {
   font-size: 14px;
   font-family: Arial;
   color: #515151;
}

上記のプロパティは、 などの要素によって簡単に継承されるため、特定の要素に別の を指定したい場合を除き、または のようなより具体的なセレクターを使用してオーバーライドできるまで、毎回orpを宣言する必要はありません。font-familyfont-sizefont-family

.class_name p {
   font-family: Open Sans, Arial;
}

color red長いセレクターよりも簡単になるユニバーサルセレクターが.class_nameあります。

.class_name p, .class_name div, .class_name fieldset {
   /* This is really bad */
}

代わりに、上記を次のように書くことができます

.class_name * {
   /* Much better */
}

結論 : CSS セレクターを学習します。それが唯一の方法であり、CSS を自分で最適化できます。セレクターは DOM に完全に依存しているため、事前に定義された手法はありませんが、セレクターを複雑にしすぎず、シンプルに保つ必要があります。 100行以上のくだらないCSSにつながるより具体的なルールを書くことになります...

また、パフォーマンスを最適化するためにいつでも使用できる Google の便利なツールを次に示します。

于 2013-10-24T15:13:23.180 に答える
2

:matchesCSS Selectors 4 では、疑似クラスで同様のことが可能になります。

:matches(body.certain_page, body.other_page) h1 { ... }

Webkit/Blink および Gecko ベースのブラウザー (それぞれ:-webkit-any()およびとして:-moz-any()) で既に利用可能ですが、実験的な機能としてのみです。CSS セレクター 4 がほとんどのブラウザーで採用されるまでは、CSS プリプロセッサーを使用することが、CSS の記述におけるこのような自己反復を防ぐ唯一の解決策のようです。

于 2013-10-24T15:21:09.643 に答える