13

これが標準の一部であるかどうかはわかりませんが、少なくとも 2 つの主要なブラウザーで実装されています。

  • :-webkit-any-linkクロームで
  • :-moz-any-linkFirefox で

そのためのドキュメントが見つかりません。その目的、対応ブラウザ、使用例を知りたいです。

4

2 に答える 2

19

:any-linkはセレクタ レベル 4で提案された新しい疑似クラスで、 によって一致するすべての要素に一致し:link, :visitedます。私が見たところ、その主な目的は、ハイパーリンクを選択する必要があるセレクターを単純化すること:linkです。これは特に、すべてのハイパーリンクではなく、未訪問のリンクのみを意味します (本質的に の反対になり:visitedます)。

:linkおよびの目的で:visited、WHATWG HTMLとW3C HTML5はどちらも「ハイパーリンク」を次のいずれかとして定義します。

  • 属性<a>を持つ要素。hrefこれは、ページ内のアンカーをマークするために伝統的に使用されていた名前付きアンカー (つまり、属性の代わりに属性を持つ<a>要素) を除外し、現在は任意の要素の属性の使用に取って代わられています。HTML 4 の名前付きアンカーを参照してください。hrefnameid

  • 属性<area>を持つ要素。href

  • 属性を持つ<link>要素。href

たとえば、ページ ヘッダーのリンクを他のすべてのリンクとは異なる色にする必要があるシナリオを考えてみましょう。

body > header > a:link, body > header > a:visited {
    color: white;
}

body > headerパーツが両方のセレクターで複製されていることに注意してください。これは冗長に思えますが、訪問状態に関係なく、ページ ヘッダーのリンクを残りのリンクとは異なる色にするために現在必要です。これは、とにかくオーバーライドbody > header > aするために使用する必要がある十分に具体的ではないためであり、厄介なことに未訪問のリンクにのみ適用されます.!importantbody > header > a:link

疑似クラスを使用:any-linkすると、代わりにこれを簡単に実行できます。

body > header > a:any-link {
    color: white;
}

特異性は個々の半分とまったく同じであるため、問題はないはずです.

もちろん、プレフィックスなしで実装しているブラウザはまだないため、これは機能しません。a[href]別の方法として、とにかく HTML ドキュメントで作業している可能性が最も高いことを考慮して、代わりに使用することができます.

body > header > a[href] {
    color: white;
}

a対a:link, a:visited対a:any-link対の使用についてはa[href]、この他の私の回答でより詳細な説明があります。

CSS にプレフィックスがあり、実験目的でのみ存在する他のものと同様に:-moz-any-link、:-webkit-any-linkサイトで使用しないでください。さらに、たとえ今それらを使用したとしても、(セレクターだけでなく) ルール自体を複製する必要があります。ブラウザーは、認識されないセレクターのルール全体を削除する必要があり、実際のコードではまったく役に立たなくなるからです!

2013 年の初めの時点で、:any-link私が知っている の他の実装は存在しません。これがそれぞれのベンダーによって実装され、その後 Selectors 4 に含めることが提案されたのか、それともベンダーが実装を開始する前に事前に仕様が定められていたのかはわかりませんが、それは問題ではないと思います.

:-moz-any-linkそういえば、 /:-webkit-any-link疑似クラスと:-moz-any()/を混同しないように注意してください。代わり:-webkit-any()に後者が指定されてい:matches()ます (名前の混乱を避けるためでしょうか?)。

于 2013-01-21T11:19:40.513 に答える
2

Mozilla CSS Extensionsドキュメントでは、:-moz-any-link「(:link および :visited に一致)」という注記で言及されています。:link詳細情報へのリンクは廃止されましたが、このような疑似クラスを使用する明らかな理由は、リンクに関する CSS の奇妙な設計です:visited。単一のセレクターを使用すると、1 つの疑似クラスのみが異なる 2 つの複雑なセレクターを記述する必要がある複雑なケースで役立ちます。

を使用することもできますa[href]が、セレクターがリンクの作成に使用される特定の要素 (および属性) にバインドされることを除きます (これはマークアップ言語の問題です)。

Firebug を使用してその中のリンクを調べると、ブラウザーの既定のスタイル シートから次のスタイルが表示されます。

*|*:-moz-any-link:not(svg|a) {
    text-decoration: underline;
}
:-moz-any-link {
    cursor: pointer;
}

後者は、すべてのリンクのマウス ポインター (「カーソル」) の形状を設定します。前者は、svg要素内を除き、リンクに下線を付けます。

于 2013-01-21T10:58:26.757 に答える