web-dev-qa-db-ja.com

HTMLアンカー、スタイルを無効にする

いくつかのhtmlアンカーリンクコードがあり、他のドキュメントとは異なり、リンクではないように見せたいです。

同じようにブルートフォースで強制せずにテキストをアンカータグでラップすることによって引き起こされるスタイルの変更を無効にする簡単な方法はありますか（つまり、本文のフォントスタイルを変更する場合、他のいくつかの：linkを変更する必要はありません）もの）。

htmlcssanchor
32
Jonathon

色を黒に設定し、テキストの装飾を明示的になしに設定することは、私にとってうまくいくよりも少し積極的です。

アンカーのCSSが「良性」であり、既存のCSSに溶け込むように探していました。これが私が行ったことです：

a.nostyle:link {
    text-decoration: inherit;
    color: inherit;
    cursor: auto;
}

a.nostyle:visited {
    text-decoration: inherit;
    color: inherit;
    cursor: auto;
}

次に、CSS nostyleクラスを、フォーマットされないようにしたいアンカーに追加しました。

58
Jeff Fischer

IEを気にしない場合は、:not(#exclude)（excludeは問題のリンクのIDです）をリンクスタイルに添付できます。

a:link:not(#exclude), a:visited:not(#exclude) {
    text-decoration: none;
    color: blue;
    cursor: pointer;
}

そうでなければ、私はあなたがそれをあなたが説明する方法で力ずくで行うことができないと思います。代わりにインラインスタイルを使用することも（推奨されません）、そのリンクに割り当てられた特別なクラス/ IDを使用することもできます。そのセレクターはbodyでグループ化します。たとえば、次のスタイルがある場合：

body {
    text-decoration: none;
    color: black;
    cursor: auto;
}

a:link, a:visited {
    text-decoration: none;
    color: blue;
    cursor: pointer;
}

そのリンクに一致する、より具体的なセレクターをbodyルールにトスするだけです。

body, #exclude {
    text-decoration: none;
    color: black;
    cursor: auto;
}

a:link, a:visited {
    text-decoration: none;
    color: blue;
    cursor: pointer;
}
5
BoltClock

私はクラスを作成することでこれを達成しました.reset-aとそのすべての疑似クラスをターゲットにします。

すべての疑似クラスをターゲットにすることは、それを完璧にするために重要です。

outline: 0プロパティは、リンクがフォーカスまたはアクティブになっているときにリンクを囲む点線の境界を削除します。

.reset-a, .reset-a:hover, .reset-a:visited, .reset-a:focus, .reset-a:active  {
  text-decoration: none;
  color: inherit;
  outline: 0;
  cursor: auto;
}
3
Markandeya