web-dev-qa-db-ja.com

インラインスタイルのCSS擬似クラス

インラインスタイルを使用して擬似クラスを持つことは可能ですか？

例：

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

上記のHTMLが機能しないことは知っていますが、同様の機能がありますか？

追伸外部スタイルシートを使用する必要があることはわかっていますが、使用しています。インラインスタイルを使用してこれを実行できるかどうかに興味がありました。

htmlcsscss-selectorspseudo-classinline-styles
116
Web_Designer

いいえ、これは不可能です。 CSSを使用するドキュメントでは、インラインstyle属性にはプロパティ宣言のみを含めることができます。スタイルシートの各ルールセットに表示されるステートメントの同じセット。 スタイル属性の仕様 から：

スタイル属性の値は、CSS 宣言ブロック （区切り括弧を除く）の内容の構文と一致する必要があります。その正式な文法は、 CSSコア文法 ：

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

セレクター（擬似要素を含む）、at-rules、またはその他のCSS構造は許可されていません。

インラインスタイルは、一部の匿名のスーパー固有IDセレクターに適用されるスタイルと考えてください。これらのスタイルは、style属性を持つその1つの要素のみに適用されます。 （要素がそのIDを持っている場合、スタイルシートのIDセレクターよりも優先されます。）技術的には、そのようには機能しません。これは、属性が擬似クラスまたは擬似要素スタイルをサポートしていない理由を理解するのに役立つだけです（擬似クラスおよび擬似要素が表現できないドキュメントツリーの抽象化を提供する方法と関係があります）ドキュメント言語）。

インラインスタイルは、ルールセットのセレクターと同じカスケードに参加し、カスケードで最も優先順位が高いことに注意してください（!importantにもかかわらず）。そのため、疑似クラス状態よりも優先されます。インラインスタイルで擬似クラスまたはその他のセレクタを許可すると、新しいカスケードレベルが導入され、それによって新しい複雑なセットが導入される可能性があります。

また、スタイル属性仕様の非常に古いリビジョン 元々これを許可することを提案していました ですが、おそらく上記の理由により、または実装が実行可能なオプションではなかったため、破棄されました。

107
BoltClock

CSSではなく、インライン：

<a href="#" 
   onmouseover = "this.style.textDecoration = 'none'"
   onmouseout  = "this.style.textDecoration = 'underline'">Hello</a>

例を参照→

41
mVChr

インラインを必要とせずに、内部CSSを使用できます

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

あなたが持つことができます：

<a href="http://www.google.com" id="gLink">Google</a>
<style>
  #gLink:hover {
     text-decoration: none;
  }
</style>
26
Jim Doodle