12

ページの読み込み時にいくつかのリンクボタンに CSS を適用したいのですが、そのうちの 1 つは<a id="lb1">logoff</a>スタイルを維持する必要があり、ホバーやその他のイベントでスタイルを変更する必要はありません。

リンクボタンにはクラスがなく、すべてに適用される css は次のようにタグに適用されます。

a
{
 //style
}

a:hover
{
  // style
}

出来ますか？

4

7 に答える 7

11

いいえ、できません。

より具体的なセレクター (または style 属性を持つインライン CSS) を使用して、誤ってオーバーライドされる可能性を低くすることができます。

の (うわぁ) 大ハンマーを使用できるので、それらは別のルール!importantによってのみオーバーライドされます。!important

ただし、それらがオーバーライドされるのを防ぐ方法はありません。

于 2012-12-19T17:06:24.483 に答える
6

なるべく使用しないでください!important。これを使用すると、非常に多くの厄介な問題や問題が発生します。とても怠惰なハックだと思います。

やりたいことは、上書きしたくないクラスをリンクに追加することです。aクラスには、一般的なセレクター（ 、、、pなど）よりも高い優先順位が与えられbます。したがって、このクラスをリンクに追加すると、CSSは設定したデフォルトのCSSを上書きしますa。

CSS：

a {
color: red;
}
a:hover {
color: blue;
}
.derp:hover { /*you can add everything you want to preserve here, essentially make it the same as the link css. you can also change it to #lbl:hover, although there's no good reason to be using an ID as a CSS selector*/
color: red;
}

HTML：

<a href="#">this will turn blue on hover</a>

<a class="derp" href="#">this will stay red on hover</a>

これがあなたに見せるためのフィドルです。2番目のリンクには、元のスタイルを保持するクラスが追加されています：http: //jsfiddle.net/p6QWq/

于 2012-12-19T17:11:35.803 に答える
3

投稿されたコードを見ると、何をしたいのかがもう少し明確になります。これを試して：

a {
    text-decoration: none;
    color: orange;
}
a:hover {
    text-decoration: underline;
    color: blue;
}

<a>これにより、すべての要素にデフォルトのスタイルが適用されます。これで、上記で指定したIDを使用してアンカーに特定のスタイルを指定することにより、このデフォルトのスタイルを上書きできます。

#lb1 {
    color: black;
    text-decoration: none;
}
#lb1:hover {
    color: black;
    text-decoration: none;
}

私はこれを素早く汚いjsFiddleでモックアップしました。これで目的の結果が得られるかどうかを確認してください。IDは、クラスやデフォルトの要素スタイルよりも優先されます。したがって、同じものを維持したい場合は、特定の要素を適用してIDを付け、それに応じてスタイルを設定します。これは、クラスを複数の要素に適用する必要がないようにすることでも役立ちます。12のクラスを適用するよりも、1つのIDを適用する方がコーディングが少なくて済みます。（誇張された例です。リンクがいくつあるかわかりません。）

お役に立てれば。

于 2012-12-19T17:11:44.827 に答える
3

変更したいすべてのリンク ボタンに a を追加し、class変更したくないリンク ボタンには追加しないでください。

次に、次のように呼び出すことができます。

  $(".myClass").css("backgound-color", "blue");
  • これにより、クラスが のすべての要素の背景色がmyClass青色の背景色に変更されます。

または、次のクラスを持つリンク ボタンにまったく新しいクラスを追加することもできますmyClass。

  $(".myClass").addClass("myExtraClass");
  • これclassにより、リンクボタンの属性が作成されますclass="myclass myExtraClass"
于 2012-12-19T16:59:58.820 に答える
2

css は定義上カスケードであるため、タグに適用するスタイルは、上書きしない限り、この特定のスタイルに適用されます。

他のすべてのボタンにクラスを割り当てるか、この特定のボタンのすべてのデフォルト プロパティを上書きする必要があります。

また、疑似クラス :visited と :active を忘れないでください。

于 2012-12-19T17:04:40.460 に答える
1

!importantCSS で次のように使用する必要があります。

a {
    /* style */
    background: #FFF !important;
}

a:hover {
    /* style */
    background: #FFF !important;
}
于 2012-12-19T17:03:37.420 に答える
0

別のスタイルシートを作成し、html のヘッドにあるスタイルシート リンクの END に配置するだけで、いつでも CSS を上書きできます。

<head>
    <link rel="stylesheet" href="location/location/first_stylesheet.css">
    <link rel="stylesheet" href="location/location/revised_stylesheet.css">
</head>

ただし、これは css を上書きする最も生産的な方法ではありません。要素に class 属性を追加するだけで、この個別のスタイルシートの必要性を排除することをお勧めします。クラス attr を使用すると、基本的な html 要素、タグを変更し、最終レイヤーをオーバーレイして「それらすべてを支配する」ことができます。楽しみ！

于 2012-12-19T20:11:26.657 に答える