[解決済み] インラインスタイルを持つCSS擬似クラス
質問
インラインスタイルを使用して擬似クラスを作成することは可能ですか?
例
<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 仕様では は、もともとこのようなことを許可することを提案していました。 しかし、おそらく上記の理由か、実装が実行可能なオプションでなかったため、廃案となったのでしょう。
関連
-
[解決済み] CSSの親セレクタはありますか?
-
[解決済み] CSSでcellpaddingとcellspacingを設定する?
-
[解決済み] CSSでテキストや画像の背景を透明にするには?
-
[解決済み] How can I set the default value for an HTML <select> element?
-
[解決済み] CSSのクラス名/セレクタに使用できる文字は?
-
[解決済み] インラインCSSでa:hoverを記述するには?
-
[解決済み] 最初の要素にクラスを指定するCSSセレクタ
-
[解決済み] div内の要素を縦に並べるにはどうしたらいいですか?
-
[解決済み] 残りの幅を埋めるためにdivを展開する
-
[解決済み】HTML5入力のプレースホルダの色をCSSで変更する。
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] Bootstrap 3.3.7で改行する方法
-
[解決済み] bootstrapでボタンにリンクを貼るには?
-
[解決済み] cssのfit-contentで横幅を自動サイズ調整する
-
[解決済み] HTML IFステートメント
-
[解決済み] WebSocketとサーバー送信型イベントの比較/EventSource
-
[解決済み] div内の要素を縦に並べるにはどうしたらいいですか?
-
[解決済み] Flexbox:水平方向と垂直方向の中央揃え
-
[解決済み] CSS 背景の不透明度 [重複]について
-
[解決済み] CSS背景のストレッチとスケール
-
[解決済み] div内の画像の下に余分なスペースがある