English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

CSS 参考マニュアル

CSS@ルール(RULES)

CSS属性完全ガイド

CSS :link シレクタ

:linkのペリクルを選択器は、要素内のリンクを選択するために使用されます。それは、他のペリクルを選択器（例えば:hover、:active、:visited）が設定されているリンクを含むすべての未訪問のリンクを選択します。リンク要素のスタイルを正しくレンダリングするために、:linkのペリクルを選択器は他のペリクルを選択器の前に配置し、LVHAの順序に従う必要があります：:link — :visited — :hover — :active。:focusのペリクルを選択器は:hoverのペリクルを選択器の左右に配置され、実現したい効果に応じて順序を決定する必要があります。

完全なCSS選択子リファレンスマニュアル

オンラインの例

未訪問のリンクのスタイルを選択します：

!DOCTYPE　html>
<html>
<head>
<meta　charset="utf-8">　
<title>基本のチュートリアル(oldtoolbag.com)</title>　
<style>　
a:link
{
background-color:lightgreen;
}
</style>
</head>
<body>
<a　href="//ja.oldtoolbag.com">oldtoolbag.com</a>
<a　href="//www.baidu.com"　target="_blank">baidu.com</a>
<a　href="//www.pcjson.com"　target="_top">pcjson.com</a>
<p><b>注意:</b>:linkはまだ訪問していないリンクにリンク先のスタイルを設定します。</p>
</body>
</html>
テストを見てみる ‹/›

定義と用法

:linkは未訪問のリンクに特別なスタイルを追加します。

注意: :linkシレクタは既に訪問したリンクに対してスタイルを設定しません。

ヒント: 使用 :visited ページのリンクのスタイルを選択するシレクタを設定します。:hoverマウスがその上に乗っているリンクのスタイルを選択子です。:active リンクをクリックしたときのスタイルを選択子を設定します。

ブラウザの互換性

テーブルの数字は、この属性をサポートする最初のブラウザのバージョン番号を示します。

選択子




:link4.07.02.03.19.6

関連ページ

CSSのチュートリアル: CSSのリンク

CSSのチュートリアル: CSSの擬似クラス

オンラインの例

アクティブな、訪問した、未訪問のリンクまたはマウスがその上に乗っているリンク：

!DOCTYPE　html>
<html>
<head>
<meta　charset="utf-8">　
<title>基本のチュートリアル(oldtoolbag.com)</title>　
<style>
a:link　　　　{color:green;}
a:visited　{color:green;}
a:hover　　　{color:red;}
a:active　　{color:yellow;}
</style>
</head>
<body>
<p>マウスを上に持ち、このリンクをクリックしてください:　<a　href="//ja.oldtoolbag.com/">oldtoolbag.com</a></p>
</body>
</html>
テストを見てみる ‹/›

オンラインの例

異なるスタイルのリンクスタイル：

!DOCTYPE　html>
<html>
<head>
<meta　charset="utf-8">　
<title>基本のチュートリアル(oldtoolbag.com)</title>　
<style>
a.ex1:hover,a.ex1:active　{color:red;}
a.ex2:hover,a.ex2:active　{font-size:150%;}
a.ex3:hover,a.ex3:active　{background:red;}
a.ex4:hover,a.ex4:active　{font-family:monospace;}
a.ex5:visited,a.ex5:link　{text-decoration:none;}
a.ex5:hover,a.ex5:active　{text-decoration:underline;}
</style>
</head>
<body>
<p>リンクにマウスを合わせてスタイルの変更を確認してください.</p>
<p><a　class="ex1"　href="/css/">このリンクが色を変更します</a></p>
<p><a　class="ex2"　href="/css/">このリンクがフォントサイズを変更します</a></p>
<p><a　class="ex3"　href="/css/">このリンクが背景色を変更します</a></p>
<p><a　class="ex4"　href="/css/">このリンクがフォントの種類を変更します</a></p>
<p><a　class="ex5"　href="/css/">このリンクが文字の装飾を変更します</a></p>
</body>
</html>
テストを見てみる ‹/›
完全なCSS選択子リファレンスマニュアル
CSS関数（Functions）CSS選択子全書