0

HTML にはアクセスできないが、CSS ファイルを変更できるページで 3 つのアイコンを非表示にする必要があります。

htmlコードは次のとおりです。

 <img class="color_box" title="Annotations" src="http://www.site.com/images/notice.png">

 <span class="with_tooltip" title="This is a message"></span>

 <img class="color_box with_tooltip" style="background-color:#FFFFFF;" src="images/clear.gif" title="White">

次のようなさまざまな組み合わせを試しました：

.color_box with_tooltip{
    display:none;
}

また

.color_box, .with_tooltip{
     display:none;
}

ただし、すべてのアイコンを非表示にすることはできません。コードをどのように変更するかによって、隠されているものもあれば、そうでないものもあります..

提案はありますか？

4

2 に答える 2

4

CSS ルールは、特異性レベルを介して適用されます。より具体的なルールは、あまり具体的でないルールよりも優先される可能性があります。

だからあなたは次のようなスタイルを持っているかもしれません

#id .yourClass {something...}

それはあなたの.yourClass宣言だけを打ち負かしています。

これを回避する方法は、!importantフラグを使用することです。これを試して：

.color_box, .with_tooltip {display:none !important;}

!important は、将来の CSS の更新を面倒にする可能性があるため、典型的な「最後の手段」ですが、既存のサイトを CSS のみで変更する必要があり、変更の一部を強化する必要がある場合に役立ちます。

于 2013-06-04T22:35:14.793 に答える
0

上記の 2 番目のセレクターに !important 属性を追加してみてください。非表示をオーバーライドしている他のスタイルが配置されている可能性があります。

!important 句を使用せずにこれが機能する非常に単純なJSFiddleを作成しました。CSS を削除して再度追加すると、実際の動作を確認できます。

.color_box, .with_tooltip {display: none !important;}
于 2013-06-04T22:42:24.107 に答える