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

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

巴扎黑

リリース： 2017-04-01 14:00:55

オリジナル

2054 人が閲覧しました

疑似クラスは、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}
別のリンクに適用されました:
これは最初のリンクセットです
 これは 2 番目のリンクセットです

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

...