スタイルシートa {}の代わりに (またはそれに隣接して)使用する理由があるかどうか誰か教えてもらえますか? a:link, a:visited {}ブラウザやサイトなどでこれをテストした結果に一貫性がなかったため、満足のいく答えは得られませんでした。Google でも答えを見つけることができませんでした。
これはもちろん、値なしでタグを使用する理由が決してないことを前提としています。多分それは間違った仮定です。<a>href
**編集**
私はこれらのセレクターが何をするか知っています。常に属性があるため、 oraの代わりに使用する理由を探しています。しかし、Chris Blake と Ryan P が回答で述べたように、javascript の使用法もあり、どちらも属性を必要としません。a:linka:visitedahref<a name="top">href
もちろん、これは、値なしでタグを使用する理由が決してないことを前提としています。多分それは間違った仮定です。
<a>href
それはプロジェクトによって異なります。厳密に言えば、すべての要素に属性が必要なわけではないため、これは誤った仮定です。実際、HTML5 ではfor everyを指定する必要はありません。Chris BlakeとRyan Pは名前付きアンカーについて言及しています。属性 forはHTML5 の時点で廃止されていますが、名前付きアンカーは依然として広く使用されており、単にレガシーと伝統によって存続し続けることを付け加えておきます。<a>hrefhref<a>name<a>
とはいえ、今後は、作成者はid名前付きアンカーではなく属性を使用してドキュメント アンカー フラグメントを指定することをお勧めします。
また、属性がなくてもJavaScript の属性を持つ<a>要素はめちゃくちゃです。を使用してイベントをバインドすることを主張する場合でも、適切な劣化のために、少なくともを使用してどこかを指す必要があります。hrefonclickonclickhref
しかし、簡単にするために、属性<a>なしで要素を記述することはないと仮定しましょう。href
これを念頭に置いて、CSS セレクターに戻ると、考慮すべき重要な点が 2 つあります。
いいえ、セレクターaとa:link, a:visitedは厳密には同等ではありません。このトピックに関する私の以前の回答を引用します。
セレクターはすべての要素に
a一致する必要がありますが、アクセスされていないハイパーリンクである要素のみに一致します(HTML 4 ドキュメント タイプは、属性を持つ要素としてハイパーリンクを定義します)。どちらの仕様にも、自動的に変換する必要がある、またはその逆を行う必要があるとはどこにも記載されていません。<a>a:link<a><a>hrefaa:link
言い換えれば、HTML では、 (CSS1 では) は(属性セレクターを持つ CSS2 では) または(セレクター レベル 4の新機能) ではなく、a:link, a:visited厳密に同等です。属性に値があるかどうかは問題ではないことに注意してください。値が存在する限り、疑似クラスは一致するため、. また、これは現在の HTML のすべての標準に当てはまります。前述のように、既存の仕様では必須属性ではないため、これには HTML5 も含まれると思います。a[href]a:any-linka[href]href
:link他の言語がandに対してまったく異なるセマンティクスを定義している可能性があることを覚えておいて:visitedください — それらが HTML の同様に固有のセレクターと一致するのはたまたまです。これについては次に説明します...
これは大きな落とし穴です:はまたはaよりも具体的ではありません。これは、と にスタイルを個別に適用するときに特に明らかな特異性の問題の非常に一般的な原因です。これは、特異性の理解の欠如を回避するためのあらゆる種類のハックにつながります。a:linka:visitedaa:linka:visited!important
たとえば、次の CSS を考えてみましょう。
/* All unvisited links should be red */
a:link {
color: red;
}
/* All visited links should be slightly darker */
a:visited {
color: maroon;
}
/* But no matter what, header links must be white at all times! */
body > header > a {
color: white;
}
a:linkand a:visited(一般化されたルール/セレクターと呼んでいるもの) は (特殊なルール/セレクターと呼んでいるもの) よりも具体的であるため、これは期待どおりに機能しませんbody > header > a。そのため、ヘッダー リンクは実際には決して白くなりません:
/* 1 pseudo-class, 1 type -> specificity = (0,1,1) */
a:link, a:visited
/* 3 types -> specificity = (0,0,3) */
body > header > a
ほとんどの CSS コーダーが最初に頭に浮かぶのは!important、具体性を完全に打ち負かして を投入することです。
body > header > a {
color: white !important;
}
しかし、それはあなたにあらゆる種類の悪い評判をもたらしますよね？だから、そうしないようにしましょう。
セレクター レベル 4 は、この特異性の問題に対して1 つではなく2 つの解決策を提供します。これらのソリューションは、そのままでは新しいものであり、Internet Explorer および Microsoft Edge レガシ (UWP/EdgeHTML/not-Chromium のもの) ではサポートされていませんが、ありがたいことに、Internet Explorer 7 以降で機能する 3 つ目のソリューションがありますa[href]。上で述べた属性セレクター。
:any-link疑似クラス:any-linkには、この質問に対する私の回答で読むことができるいくつかの歴史がありますが、実際に:any-linkは、 のキャッチオールとして機能し:link, :visitedます。その主な目的は、セレクターの重複を排除することであり、そのため、実際には同等の形式の:is(:link, :visited).
a:any-link特殊化されたルールで使用して、一般化されたルールa:linkとa:visitedルールの特異性を一致させることができます。これにより、それらをオーバーライドできます。
a:link {
color: red;
}
a:visited {
color: maroon;
}
/* 1 pseudo-class, 3 types -> specificity = (0,1,3) */
body > header > a:any-link {
color: white;
}
:where()疑似クラス:where()もその背後にいくつかの歴史がありますが、本質的に:is()は、その引数の特異性をゼロにすることを除いて、 に類似しています。それがどのように機能するかの詳細なガイドについては、この質問に対する私の回答を参照してください。
:linkと:visited疑似クラスをs でラップし:where()て疑似クラスの特異性を取り除くことができます。これにより、特殊なルールによってオーバーライドできるようになります。
/* 1 type -> specificity = (0,0,1) */
a:where(:link) {
color: red;
}
/* 1 type -> specificity = (0,0,1) */
a:where(:visited) {
color: maroon;
}
/* 3 types -> specificity = (0,0,3) */
body > header > a {
color: white;
}
a[href](古いブラウザの場合)さいわい、古いブラウザーをサポートする必要がある場合、属性セレクターは疑似クラスと同じくらい具体的です。a[href]これは、両方/どちらかa:linkおよび/またはを意味するために使用できることを意味a:visitedし、それらは等しく具体的であるため、具体性の問題に遭遇することはありません!
/* 1 attribute, 3 types -> specificity = (0,1,3) */
body > header > a[href] {
color: white;
}
これはすべてまだ信じられないほど主観的なものですが、私は次の個人的な経験則に従います。
リンクの状態に依存しないaスタイルに適用します(つまり、リンクである限り)。
リンクが訪問されるかどうかが重要な場所に適用しa:linkてa:visitedスタイルを設定します。
上記の特異性の問題を考慮して、と/の両方 の規則の間で宣言を混在させないでください。どこかの両方の状態に同じプロパティを適用する必要があるが、既に別のルールに適用している場合は、上記の 3 つのオプションのいずれかを使用して特異性の問題を回避します。aa:linka:visiteda:linka:visited
たとえば、サイトの公開前の近日公開ページで使用したリンク スタイルは次のとおりです。
a {
text-decoration: none;
transition: text-shadow 0.15s linear;
}
a:link {
color: rgb(119, 255, 221);
}
a:visited {
color: rgb(68, 204, 170);
}
a:hover, a:active {
text-shadow: 0 0 0.5em currentColor;
}
a:focus {
outline: thin dotted;
}
/* ... */
footer a:link, footer a:visited {
color: rgb(71, 173, 153);
}
トランジションは、訪問されたかどうかに関係なく、text-shadowすべての要素に対して定義されます。トランジションは、それらの 1 つにマウスを置いてクリックしたときにのみ有効になるためです (ルールに対応)。aa:hover, a:active
ここで、訪問済みのリンクを未訪問のリンクよりも少し暗い色合いにしたいので、色を別a:linkのa:visitedルールに入れます。しかし、何らかの理由で、アクセスされているかどうかに関係なく、フッター リンクを同じ色で表示したいと考えています。
を使用するfooter aと、上記の特異性の問題に遭遇するので、footer a:link, footer a:visited代わりに選択します。これは従来の理由によるものでした (以下に示すように、私がこれを最初に投稿したのは 2012 年です!) が、もちろん、footer a:any-link. ただし、特異性一致の原則はすべて同じように適用されます。
私のアドバイスが、リンク スタイルの混乱を解決するのに役立つことを願っています。
a:linkとは、通常のリンクとアクセスしたリンクのカスタムa:visited（ブラウザのデフォルト以外）の色をそれぞれ指定するために使用されますが、、、、を含むすべてのスタイルを上書きするために使用されます。たとえば、リンクがアクティブであるか、訪問されているかどうか、またはホバーされているかどうかに関係なく、以下は同じ色になります。a {}a:linka:visiteda:active
a { color:red; }
a:pseudoClass表記などの個々のスタイルを使用することで、これを回避できます。
さて、あなたはただのアンカーであるアンカーを持つことができます。例えば、
<a href="#top">Return to top</a>
<a name="top">Top</a>
これはあなたの誤った仮定を修正します（ただし、「トップ」にはアンカーは必要ありませんが、最も哲学的に正しいです）。
さらに、Sarfrazが言ったように、スタイルが設定されている場合（そして、が他の宣言の後にあると仮定して）、他のスタイルプロパティa {}のすべての出現をオーバーライドします。a:a {}a:
a:linkそしてa:visited特定の意味を持っています。aそれ自体はすべての<a>要素に影響しa:linkますが、まだアクセスされていないリンクにa:visitedのみ影響し、アクセスされたリンクにのみ影響します。
aがプロパティを持たない場合が 2 つありhrefます。1 つ目は通常のアンカー (つまり<a name="someplace" />) で、2 つ目は純粋な Javascript インタラクション (つまり<a onclick="doSomething( );" />) です。これらは「リンク」ではなく、同じスタイルにするべきではありません。
編集：明確にするために、（属性セレクターが利用可能または標準化される前に以前の表記法が存在していたと思いますa:link）とほぼ同等です。したがって、代わりにa[href]使用する理由は、すべてのアンカー タグを同じスタイルにしたい場合です。一部のブラウザーの既定のスタイルでは、2 つの異なる表示が行われます。たとえば、下線は にのみ適用され、 には適用されません。aa:linka:linka