1

私のHTMLは次のようなものです。

<a class="another addAnother">Add another</a>

外部スタイルシートでこのような「別の」クラスを使用して、上記のスタイルを定義しました。

fieldset.associations a.another {
   color: #693;
   display: block;
   margin: 7.5px 0px 15px;
}

次のように、「addAnother」クラスを使用してタグのスタイルをオーバーライドしようとしています（必要な場合）。

fieldset.associations a.addAnother {
   display: none;
}

しかし、私はオーバーライドすることができません。どんな助けでも大歓迎です。

スタイルをオーバーライドする間、セレクターは同じでなければならないという規則はありますか（私はこれを試しましたが、役に立ちませんでした）??

4

4 に答える 4

4

元の宣言は両方とも。の特異性を持っています0,0,2,2。2番目の宣言が最初の宣言より下にある場合は、それを無効にする必要があります。そうでない場合は、宣言を並べ替えるか、特異性を高めます。

body特異性を高めるためにタグを追加できます。

body fieldset.associations a.addAnother {
 display: none;
}

これにより0,0,0,1、追加できる最小量の特異性が向上します。

.anotherクラス宣言をチェーン化することで、クラスに固有にすることもできます。

fieldset.associations a.another.addAnother {
 display: none;
}

これにより、特異性が向上し0,0,1,0ます。

これはCSSの特異性を説明する記事です。!importantこの記事では、特異性が増加することについては言及され1,0,0,0ておらず、却下することはほぼ不可能であることに注意してください。

于 2011-03-16T12:23:31.663 に答える
4

両方のセレクターが等しく特定されているため、両方のプロパティの重要性は同じです。したがって、2番目のものがCSSで最初に表示される場合は、下にあるものをオーバーライドするために、より重要性を獲得する必要があります。次のように、より具体的にすることで、最初のものをオーバーライドできます。

fieldset.associations a.addAnother.another {
   display: none;
}

また

#someID fieldset.associations a.addAnother {
   display: none;
}

また

body fieldset.associations a.addAnother {
   display: none;
}
于 2011-03-16T12:23:38.403 に答える
-3 
fieldset.associations a.addAnother {
   display: none !important;
}
于 2011-03-16T12:21:04.670 に答える
-3

最終的には、これら2つのスタイルがCSSのどこにあるかによって異なりますが、次のようにもう1つ重要視することはできません。

fieldset.associations a.addAnother {
    display: none !important;
}
于 2011-03-16T12:21:07.883 に答える