a.class と .class の違い、スペースに注意してください - CSS デバッグのヒント

この問題は、画像ウィザード技術を使用して画像を配置するときに発生します。この記事では、例を示して a.class と a.class の違いを紹介します。 (CSS ビデオチュートリアル)

最初のグループ

<a href="#"><span class="ico-manage">管理</span></a>

スタイル 1 を使用します:

a:hover{color:black}
a:hover.ico-manage{color:red;}

この時点で、マウスは「Management」という単語の上を通過します。色は黒です

スタイル 2 を使用します:

a:hover{color:black}
a:hover .ico-manage{color:red;} //注意空格

このとき、マウスが「Management」という単語の上を通過すると、色は赤になります

2 番目のグループ

<a href="#" class="ico-manage">管理</a>

スタイル 1 を使用します:

a:hover{color:black}
a:hover.ico-manage{color:red;}

この時点で、マウスは「Management」という 2 つの単語の上を通過し、色は赤です

スタイル 2 を使用します:

a:hover{color:black}
a:hover .ico-manage{color:red;} //注意空格

この時点で、マウスは「Management」という 2 つの単語の上を通過し、色は赤ですは黒です

a と .ico-manage の最初のグループの場合、span タグに属するものは a と同じレベルにありません。また、a と .ico-manage の 2 番目のグループの場合、.ico -manage は a タグに属しており、これは a と同じレベルです。 これから、次の結論を導き出すことができます:

1. class が現在のタグの属性である場合、スタイルはタグ + クラス名として記述されます。

2. classがサブタグの属性の場合、スタイルはタグ+スペース+クラス名として記述されます

以上がa.class と .class の違い、スペースに注意してください - CSS デバッグのヒントの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。