4

これが可能かどうか疑問に思っていますid.cssでこの形式で定義されています。

#close{
  font-size:11px;
  text-decoration: underline;
}

#close:hover{
  cursor: pointer;
}

hoverしかし、ここでは、イベントを追加するためだけにこの ID の定義を繰り返す必要があります。このようなことをする可能性はありますか？

#close{
  font-size:11px;
  text-decoration: underline;
}:hover{cursor: pointer;}

これにより、余分な入力が節約されます..

4

3 に答える 3

6

CSS でこれを行うことはできませんが、SASSやLESSなどの CSS プリプロセッサが興味深い場合があります。次のセレクターを使用できます。SASS のこの例を参照してください。

.some-div {
    #close {
        font-size:11px;
        text-decoration: underline;

        &:hover {
            cursor: pointer;
        }
    }
}

これは次のようにコンパイルされます。

.some-div #close {
    font-size:11px;
    text-decoration: underline;
}
.some-div #close:hover {
    cursor: pointer;
}

これらはブラウザーでサポートされていないことに注意してください。プログラムをコンパイルして、Web ページに含める CSS を出力します。

于 2013-03-28T05:09:39.733 に答える
2

まあ、この特定のケースでは、

#close{
    font-size:11px;
    text-decoration: underline;
    cursor: pointer;
}

とにかくホバリングしているときにのみポインターが表示されるため;）

それ以外の場合、構文のトリックはないと思いますが、SASS のようなプリコンパイラを使用できます

于 2013-03-28T05:10:59.080 に答える
1

私が知る限り、W3C CSS Working Group でこれに取り組んでいる人は誰もいません (*)

あります：

  • プリプロセッサ、（他の回答を参照）、
  • コピペがあり、
  • おそらく CSS ZenCoding/Emmett プラグイン (聞いたことはありませんが、HTML 用の Emmett ほど必要ではありません)、
  • たぶん、「 CSSファイルの最後の行を最後にコピー{し、コンマで終わる場合は前の行をコピーしてください」のようなマクロ
  • そして、 OOCSS、BEMなどの方法論があり、セレクターを 1 または 2 レベルにネストする必要がなくなります。これは疑似のみであり、時々 2 番目のクラスです (ID はほとんどなく、クラスのみが使用されます)。

(*) ブラウザー imo ではほとんど必要ありません。私が考えることができる CSS の DRY は、クラス、:matches() (以前は :-vendor-any() として知られていた)、継承、初期値、「変数」、および新しいallプロパティ (これらはすべて、実際、彼らはより長いタスクを避けていますが、それはあなたの質問とはまったく関係ありません;))

于 2013-03-28T05:35:32.647 に答える