ハイパーリンクからすべてのスタイル/フォーマットを削除する


157

色の異なる単語(hrefリンク)を含むナビゲーションメニューを作成しています。色を変更しないでください(ホバー、訪問済みなど)。

さまざまな状態の色を設定する方法は知っていますが、テキストの色(およびその他のスタイル/フォーマット)をそのままにするコードを知りたいです。

助言がありますか?

回答:


248

リンクのスタイルを定義するだけでa:hovera:visitedなどをオーバーライドできます。

a {
  color: blue;
  text-decoration: none; /* no underline */
}

inherit代わりに親スタイルの属性を使用する場合は、値を使用することもできます。

body {
  color: blue;
}
a {
  color: inherit; /* blue colors for links too */
  text-decoration: inherit; /* no underline */
}

4
重要な部分はinheritキーワードです。残念ながら100%のサポートはありません。
david

2
initialまた、CSSをデフォルトのスタイルにリセットする場合にも役立ちます。これはここのリンクで
SiteHopper 2013

どうもありがとうございましたinherit
パーサー2016年

@david、それはまだ立っていますか?inheritancietブラウザーとInternet Explorerでのみ機能しないか、一般的なブラウザー(Chrome、Firefox)でも問題がありますか?
パーサー2016年

1
未設定 もチェックしてください。>> unset CSSキーワードは、プロパティが親から継承されている場合は継承された値にリセットし、そうでない場合は初期値にリセットします。つまり、最初のケースではinheritキーワードのように動作し、2番目のケースでは初期キーワードのように動作します。
JackMorrissey

4

クリスが私の前に言ったように、aオーバーライドするだけです。例えば:

a { color:red; }
a:hover { color:blue; }
.nav a { color:green; }

この場合、.nav aは常に緑色になり、:hoverはそれに適用されません。

これに影響を与える他のルール!importantがある場合は、を使用できますが、使用しないでください。落ちるのは悪い習慣です。

.nav a { color:green !important; } /*I'm a bad person and shouldn't use !important */

そうすると、他のルールとは無関係に、常に緑色になります。


これは彼が尋ねたものではありません。質問をもう一度読んでください。彼はすでにこれを知っています。
david

@david読み直しましたが、彼が求めていることは確かです。このコードにより、彼はスタイルを設定できますaすると、変更を防止できます:hover:visitedなど)。あなたがディックで3つの答えすべてをゴミ捨てする代わりに、あなたは実際の解決策を提案しませんか?
SpoonNZ 2012年

助けてくれてありがとう。しかし、リンクがこのような場合はどうでしょう。2つの単語を2つの色で表示しますが、リンクは1つだけです。このようにインラインでコード化しました... <a href="#" style="text-decoration: none" target="_blank"> <span style = "font-family:Arial; font-size:13px; color: #e91974; font-weight:lighter; ">ユニーク</ span> <span style =" font-family:Arial; font-size:13px; color:#020202; font-weight:lighter; ">販売</ span > </a>しかし、クリーナーが必要です。(コード内にこのようなリンクがたくさんあります)何か提案はありますか?
SiteHopper 2012年

1

aスタイルシートでセレクターを使用するだけで、アンカー/ハイパーリンクのすべての状態を定義できます。例えば:

a {
    color: blue;
}

すべてのリンクスタイルをオーバーライドし、すべての状態を青にします。


これは彼が尋ねたものではありません。質問をもう一度読んでください。彼はすでにこれを知っています。
david

-1

あなたがa.redLink{color:red;}それをホバーとそのような追加で維持することを述べるならば、a.redLink:hover{color:red;} これは他のホバー状態があなたのリンクの色を変えないことを確実にします

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.