'a:before' と 'a:after' の ':hover' 条件をどのように記述すればよいですか? 質問する

'a:before' と 'a:after' の ':hover' 条件をどのように記述すればよいですか? 質問する

の条件をどのように:hover記述すればよいですか?:visiteda:before

試しているのですa:before:hoverが、うまくいきません。

ベストアンサー1

これは実際に何をしようとしているかによって異なります。

要素が疑似クラスに一致する:before場合に疑似要素にスタイルを適用するだけの場合は、またはと記述する必要があります。疑似要素は疑似クラスの後(実際、セレクター全体の最後) に来ることに注意してください。また、これらは 2 つの異なるものであることにも注意してください。これらを両方とも「疑似セレクター」と呼ぶと、このような構文の問題に遭遇したときに混乱することになります。aa:hover:beforea:visited:before

CSS3 を記述している場合は、この区別を明確にするために、疑似要素を 2 つのコロンで表すことができます。つまり、a:hover::beforeおよび ですa:visited::before。ただし、IE8 以前の旧バージョンのブラウザー向けに開発している場合は、 1 つのコロンで十分です。

擬似クラスと擬似要素のこの特定の順序は、スペック:

セレクター内の最後の単純セレクターのシーケンスに、疑似要素を 1 つ追加できます。

シンプル セレクターのシーケンスは、コンビネータで区切られていないシンプル セレクターのチェーンです。常にタイプ セレクターまたはユニバーサル セレクターで始まります。シーケンスでは、他のタイプ セレクターまたはユニバーサル セレクターは使用できません。

シンプルセレクターは、タイプセレクター、ユニバーサルセレクター、属性セレクター、クラスセレクター、ID セレクター、または疑似クラスのいずれかです。

疑似クラスは単純なセレクターです。ただし、疑似要素は単純なセレクターに似ていますが、単純なセレクターではありません。

:hoverただし、 1などのユーザーアクション疑似クラスの場合、ユーザーが要素ではなく疑似要素自体を操作したときにのみこのa効果を適用する必要がある場合、レイアウトに依存するわかりにくい回避策を講じる以外、これは不可能です。テキストで示唆されているように、標準の CSS 疑似要素には現在疑似クラスを含めることができません。その場合は、疑似要素ではなく実際の子要素に適用する必要があります:hover


1もちろん、 疑似要素はリンクではないため、これは質問のようなリンク疑似クラスには適用されません。:visited

おすすめ記事