148

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

例：

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

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

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

4

4 に答える 4

128

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

style属性の値は、CSS宣言ブロック（区切り中括弧を除く）の内容の構文と一致する必要があります。その正式な文法は、 CSSコア文法の用語と規則で以下に示されています。

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

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

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

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

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

于 2011-03-13T23:37:03.187 に答える
52

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

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

例を見る →

于 2011-03-14T00:07:52.767 に答える
30

インラインを必要とするのではなく、内部 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>
于 2015-02-11T12:24:35.347 に答える
4

https://hacss.ioを試すことができます:

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

デモ

于 2020-06-23T18:20:06.747 に答える