CSSチュートリアル(3) 疑似クラス - ダイナミックリンク

疑似クラスは、CSS をサポートするブラウザによって自動的に認識される特別なクラス セレクターとみなすことができます。その最大の用途は、さまざまな状態のリンクに対してさまざまなスタイル効果を定義できることです。

1. 構文

疑似クラスの構文は、元の構文に疑似クラス(疑似クラス)を追加します:
selector:pseudo-class {property: value}
(selector: pseudo-class {property : value} )
疑似クラスはクラスとは異なり、CSS によってすでに定義されており、クラス セレクターのような他の名前で任意に使用することはできません。状態 (疑似クラス) スタイル。

クラス セレクターと他のセレクターを疑似クラスと混合することもできます:
selector.class:pseudo-class {property: value}
(selector.class:pseudo-class{property: value})

2.最も一般的に使用される疑似クラスは、a (アンカー) 要素の 4 つの疑似クラスで、動的リンクの 4 つの異なる状態を表します: リンク、訪問済み、アクティブ、ホバー (未訪問のリンク、訪問済みのリンク、アクティブ化リンク、およびマウス オーバー リンク) 。それぞれに異なる効果を定義します:
a:link {color: #FF0000; text-decoration: none} /* 未訪問のリンク*/
a:visited {color: #00FF00; text-decoration: none} / * 訪問済みのリンク*/
a:hover {color: #FF00FF; text-decoration: 下線} /* リンクにマウスを置く*/
a:active {color: #0000FF; text-decoration: 下線} /* リンクをアクティブにする*/
上の例では、リンクが訪問されていない場合は下線なしで赤、アクセスされている場合は下線なしの緑、リンクがアクティブ化されている場合は下線のある青、リンク上にマウスがあると紫になります。下線)
注: このリンクは、次の場合に効果がある場合があります。アクセスする前にマウスがリンクをポイントしていても、リンクにアクセスした後にマウスが再度そのリンクをポイントしても効果はありません。これは、a:hover を a:visited の前に置くためです。この場合、後者の方が優先されるため、リンクにアクセスするときに a:hover の効果は無視されます。したがって、これらのリンク スタイルを定義するときは、積み重ね順序に従い、a:link、a:visited、a:hover、a:actived の順序で記述する必要があります。

3. 疑似クラスとクラスセレクター

疑似クラスとクラスを組み合わせることで、同じページ上に異なるリンク効果のグループを作成できます。たとえば、リンクのグループを赤く定義します。それらは青になり、他のグループは緑になり、訪問後は黄色になります:
a.red:link {color: #FF0000}
a.red:visited {color: #0000FF}
a.blue:link {color : #00FF00}
a.blue:visited {color: #FF00FF}
別のリンクに適用されました:
これは最初のリンク セットです a>
これは 2 番目のリンク セットです

4. さらに、CSS2 は最初の単語も定義します。および最初の行 (first -letter および first-line) 擬似クラスでは、要素の最初の単語または最初の行に異なるスタイルを設定できます。
以下の例を見てください。段落記号内のテキストの最初の文字サイズをデフォルトのサイズの 3 倍に定義します。

...

これは段落であり、この段落の最初の単語が拡大されています。

最初の行のスタイルの別の例を定義しましょう:

… …

これは段落の 1 行目です
これは段落の 2 行目です
これは段落の 3 行目です

(上) 例では、段落の最初の行は赤、2 行目と 3 行目はデフォルトの色です)

注: 最初の単語と最初の行の疑似クラスは IE5 でサポートされている必要があります。 5以上。

-->

以上がCSSチュートリアル(3) 疑似クラス - ダイナミックリンクの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。