2

私のブログのテンプレートの CSS では、すべての画像の周りに丸い境界線が付けられ、他にもいくつかの変更が加えられています。

article img {
    border-radius: 0.3em;
    box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.15);
    -moz-box-sizing: border-box;
    border: 0.5em solid rgb(255, 255, 255);
}

一部の画像では、この境界線を適用したくありません。現在、必要な実際の設定を適用する前に、これらの設定を「リセット」するコードがあります。

img.smiley 
{
    /* RESET */
    border-radius: 0;
    box-shadow: none;
    -moz-box-sizing: content-box;
    border: 0px none;

    /* ACTUAL STYLE */
    top: 0px;
    position: relative;
}

今のところ動作しますが、テンプレートの作成者がテンプレートに変更を加えると、イメージが壊れてしまい、「リセット」セクションにデータを追加する必要があります。

これを行うより良い方法はありますか; おそらく、「クラスが知っていることをすべて無視し、代わりにこのスタイルのみを使用する」smileyimgという言い方はありますか?

4

1 に答える 1

1

:notセレクターを使用して初期スタイルを定義できます。これにより、クラス...imgを除くすべての要素にスタイリングが適用されます。.smileyimg:not(.smiley)

これを示すjsFiddleの例

article img:not(.smiley) {
    border-radius: 0.3em;
    box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.15);
    -moz-box-sizing: border-box;
    border: 0.5em solid rgb(255, 255, 255);
}
于 2013-11-13T00:01:26.233 に答える