質問: *確認した環境は、「firefox 66.0.3」+「codepen」です。 本件の挙動確認をしていたのですが、a:link で`background-color`を設定しない場合、a:visited の`background-color`が反映されませんでした。 MDN にある「上書き~」な記述はこれのことなんですかね? にしては、`color`は反映されていて、意味がわからんのですけど。 ``` a:link { background-color: gold; color: green; } a:visited { background-color: black; color: red; } ``` ![イメージ説明](https://teratail-v2.storage.googleapis.com/uploads/contributed_images/2421e95f32da58203fb6fff7f4325a8f.png) ``` a:visited { background-color: black; color: red; } ``` ![イメージ説明](https://teratail-v2.storage.googleapis.com/uploads/contributed_images/c1a56a86bb1bb1d93b0f438431792d35.png)
回答: 文章として雑で申し訳ないですが、回答を作りました。 考察(結論) リンクはすべて`:link`として処理された後で、ブラウザで`:visited`を追加(上書き)で処理していると考えられる。さらに厄介なことに、「:visitedとは」にあるように「no color or be transparent」であるものは、`:visited`で設定しても反映されない。反映させたければ、「a, a:link, a:any-link」のどれかで適当な設定を行った後、`:visited`を記述する必要がある。 **本回答は、検証から実装を推測したものです。** **根拠ドキュメントや実装に関して補足していただけると大変助かります** 以下、考察に至った経緯 =========== :link とは :link :visited > > All a elements that have an href attribute, all area elements that have an href attribute, and all link elements that have an href attribute, must match one of :link and :visited. > > Other specifications might apply more specific rules regarding how these elements are to match these pseudo-classes, to mitigate some privacy concerns that apply with straightforward implementations of this requirement. > > > :visited とは :visited > > Properties that would otherwise have no color or be transparent cannot be modified with :visited. Of the properties that can be set with this pseudo-class, your browser probably has a default value for color and column-rule-color only. Thus, if you want to modify the other properties, you'll need to give them a base value outside the :visited selector. > > > CSSの優先順位 カスケード法 > > 遷移宣言 css-transitions-1] > > important にされた UA 宣言 > > important にされた 利用者 宣言 > > important にされた 作者 宣言 > > アニメーション 宣言 [css-animations-1] > > 通常の作者宣言 > > 通常の利用者宣言 > > 通常の UA 宣言 > > > :visited に適用可能なプロパティ color, background-color, border-color, border-bottom-color, border-left-color, border-right-color, border-top-color, column-rule-color, and outline-color 主要ブラウザのデフォルトCSS デフォルトCSSをまとめてくれていたページ 検証 ### 検証時に使用した基本コード 以下のコードをベースにブラウザでの見え方を確認。 *確認した環境は、「firefox 66.0.3」+「codepen」 ``` new link visited link ``` ``` a:link::after{content: "(:LINK)";} a:visited::after{content: "(:VISITED)";} a:link { border: solid 1px; } a:visited { background-color: black; color: black; border-color: black; border-bottom-color: black; border-left-color: black; border-right-color: black; border-top-color: black; column-rule-color: black; outline-color: black; } ``` ![SS 上記のイメージを見るとわかるが、`:visited`も`:link` と判断されている。 ブラウザによる差異はあるかもしれないが、これが`:link`の CSS が`:visited`に適用される原因と思われる。 実際に Firefox では、処理が重い時`:link`の CSS で描画された後、`:visited`で上書きされる様子が観測できる。 またその際、(探しきれていないだけかもしれないが)デフォルト CSS として定義もされていない color が反映されている。 *明らかに CSS の優先順位に記述のない処理が走っている。 visited の確認には時間がかかるので遅延反映は初期描画速度を上げるための工夫ではないかと考えられる。セキュリティ観点で visited の実装に幅ができたことが逆にブラウザのおかしな挙動につながっている気がする。