1. ホーム
  2. html

[解決済み] インラインスタイルを持つCSS擬似クラス

2022-05-05 09:36:44

質問

インラインスタイルを使用して擬似クラスを作成することは可能ですか?


<a href="http://www.google.com" style="hover:text-decoration:none;">Google</a>

上記のHTMLが機能しないことは分かっていますが、似たようなもので機能するものはないでしょうか?

追伸:外部スタイルシートを使用すべきなのは分かっていますし、そうしています。ただ、インラインスタイルを使ってこれができるのかどうかが気になりました。

どのように解決するのですか?

いいえ、これは不可能です。CSSを使用する文書では、インラインの style 属性はプロパティ宣言のみを含むことができ、スタイルシートの各ルールセットに現れるステートメントの同じセットを含みます。スタイルシートの スタイルアトリビュート仕様 :

style属性の値は、CSSのコンテンツの構文と一致する必要があります。 宣言ブロック (の用語と規則で、その正式な文法は以下のとおりです。 CSSコア文法 :

declaration-list
  : S* declaration? [ ';' S* declaration? ]*
  ;

セレクタ(擬似要素を含む)、at-rule、その他のCSS構成要素は使用できません。

インライン・スタイルは、ある匿名の超特定IDセレクタに適用されるスタイルだと考えてください:それらのスタイルが適用されるのは、まさに style 属性があります。(その要素がそのIDを持っている場合、スタイルシート内のIDセレクタよりも優先されます)。技術的には、そのようには動作しません。これは、属性が擬似クラスや擬似要素スタイルをサポートしない理由を理解するのに役立ちます(それは、擬似クラスと擬似要素が、文書言語では表現できない文書ツリーの抽象化をどのように提供するかにより関係があります)。

インラインスタイルは、ルールセット内のセレクタと同じカスケードに参加し、カスケード内で最も優先されることに注意してください ( !important にもかかわらず、です。) そのため、擬似クラスの状態よりも優先されます。インラインスタイルで擬似クラスや他のセレクタを許可すると、おそらく新しいカスケードレベルが導入され、それに伴い新しい複雑なセットが発生します。

また、非常に古いリビジョンの Style Attributes 仕様では は、もともとこのようなことを許可することを提案していました。 しかし、おそらく上記の理由か、実装が実行可能なオプションでなかったため、廃案となったのでしょう。