17

ルールの CSS 固有性を高めたい場合は、接頭辞を付ける傾向がありhtmlますが、これを行うより簡潔な方法があるのだろうか?

(些細な問題のように思えるかもしれませんが、レスポンシブ グリッドを定義するスタイルシートの過程で、具体性のプレフィックスを 1 文字減らすと、数百バイト節約できます)

4

3 に答える 3

34

これは、達成しようとしていることに大きく依存します。特異性を高める安価な方法は、単純にセレクターを繰り返すことです。たとえば、これがマークアップの場合:

<figure id="myId" class="myClass"></figure>

そして、これはあなたのCSSでした：

#myId.myClass { color:red; font-weight:bold; }      /* Specificity: 110 */

マークアップをまったく変更せずに、単にclassorセレクターを繰り返すことができます。id

#myId.myClass.myClass { color:green; }              /* Specificity: 120 */
#myId#myId { font-weight:normal; }                  /* Specificity: 200 */

JSFiddle デモ。

W3C Selectors Level 3 Recommendation のCalculating Specificity セクションで述べられているように、これは完全に有効です。

注: 同じ単純なセレクターを繰り返し使用することは許可されており、特定性が向上します。

于 2013-10-16T09:35:51.383 に答える
6

私:not(#\9)は非常に短い postcss ライブラリの使用を見てきました。ie8 以下では動作しませんが、これは 2020 年です。

于 2020-05-13T18:07:52.547 に答える