1

次のような番号付きの円を定義したいとします。

ここに画像の説明を入力

http://jsfiddle.net/edi9999/6QJyX/

.number
{
    border-radius: 50%;
    width: 32px;
    height: 24px;
    text-align: center;
    padding-top:8px;
    font-size: 14px;
    display:inline-block;
    line-height: 16px;
    margin-left:8px;
    color:white;
    background-color:black;
    border-color:white;
}

要素がどのようなコンテキストであっても、クラス番号を持つ要素が同じように見えるように、セレクターに重要性を追加したいと思います。

コードの破損の例を次に示します: http://jsfiddle.net/edi9999/6QJyX/2/

これを行う方法は、CSS のすべてのプロパティに !important を追加することですが、少しくだらないので、他の解決策になるのではないかと思います。

コードのカプセル化に少し似ているように見えるので、プライベートタグを追加しました。

4

2 に答える 2

0

最良の選択肢は、セレクターの特異性を高めることです。それ以外にできることはあまりありません。

#id .number

ID セレクターは特異性を高め、セレクター内の別の ID のみがそれをオーバーライドできるようにします。

http://jsfiddle.net/6QJyX/3/

于 2013-09-22T15:26:54.633 に答える
0

セレクターの特異性を高めることは、特異性戦争につながるだけです (怒りにつながり、憎しみにつながり、苦しみにつながります)。問題の原因となっているセレクターの特異性を減らすことをお勧めします。

以下の疑似コード：

.number {...}
.card span {...} // this selector is questionable
<div.number> this is styled correctly </div>
<div.card>
    <span.number> this is styled incorrectly </span>
</div>

すべて .card spanの s を特定の方法でスタイルする必要があるのはなぜですか? 2 番目のセレクターは、狙撃兵ではなく手榴弾に似ているように見えます。つまり、必要な要素だけではなく、要素の包括的なセットをターゲットにしているようです。

于 2015-02-03T16:18:03.440 に答える