CSSセレクタ:擬似クラス

  擬似クラス(クラスセレクタ擬似)

  擬似クラス:タグと、それらの異なる状態、異なるスタイルに応じました。これは、「疑似クラス」と呼ばれています。疑似クラスは、コロンで表されます。

  たとえば、divのクラスは、カテゴリボックスに属している、非常に明確であるボックスを属します。しかし、何がクラスに属している?不明。そのため、ユーザーがクリックしたものを状態を確認する必要があるため、状態は何をクリックしてください。だから、「疑似クラス」と呼ば

  擬似静的および動的擬似クラスクラス

  2つの擬似クラスセレクタに分割されます。

  (1)静的擬似クラス:のみのハイパーリンクのスタイルに。次のように:

  リンクする前に、リンクをクリックしてください:

  :訪問のリンクを訪問した後

  PS:これらの2つのスタイルは、唯一のハイパーリンクのために使用することができます。

  (2)ダイナミック疑似クラス:すべてのラベルの場合は、該当するスタイルです。次のように:

  :ホバー「ホバー」:ラベルの上にマウス

  :アクティブな「活性化」:タブをクリックしますが、手放すとき。

  :ラベルのスタイルがフォーカスを取得した時にフォーカスがある(例えば、入力ボックスにフォーカスがあります)

  PS:上記の3つのスタイルは、唯一のハイパーリンクのために使用することができます。

  ラベルをハイパーリンク

  ハイパーリンクの四つの状態

  ラベル(すなわち、四つの状態に相当)、暗唱するのに必要な4つの擬似クラスを有しています。次のように:

  ハイパーリンクをクリックする前に::リンク「リンク」

  リンクが訪問された後::訪れた「訪問」

  :ホバー「ホバー」:ラベルの上にマウス

  :アクティブな「活性化」:タブをクリックしますが、手放すとき。

  次のようにコメント:(なし)対応するコードであります

  リンク{

  赤色;

  }

  A:{訪問

  オレンジ色;

  }

  A:ホバー{

  色:緑;

  }

  A:アクティブ{

  色:ブラック。

  }

  次のように対応するコードである:(注釈します)

  / *の前にすると、ハイパーリンクが赤をクリックします* /

  リンク{

  赤色;

  }

  後/ * * /ハイパーリンクが緑色でクリックしてみましょう

  A:{訪問

  オレンジ色;

  }

  / *ホバー、ラベルに置きます* /

  A:ホバー{

  色:緑;

  }

  / *マウスは、リンクをクリックしたが、とき* /手放します

  A:アクティブ{

  色:ブラック。

  覚えておいて、CSS、これら四つの状態が一定の順序で記述する必要があります。

  A:リンク、:訪問、:ホバー、:アクティブ

  あなたは順序に従わない場合、それは失敗します。「愛とガイドラインは、」:憎しみを愛します。あなたは憎しみの後に愛さなければなりません。

  ハイパーリンクの造園

  Q:{}は、ハイパーリンクのプロパティを定義し、以来:リンク{}は、ハイパーリンクをクリックする前に属性を定義し、これらの二つはそれがどのような違いを生むんこと?

  A:無錫婦人科良いhttp://www.xasgfk.cn/

  そして{}:リンク{}の区別:

  (アンカー含む)すべてのハイパーリンクのための{}定義されたスタイル

  A:全ての定義されたスタイルhref属性書かれたハイパーリンクのリンク{}(アンカーが含まれていません)

  使用中に、より困難であるとき、ラベルをハイパーリンク。このためだけでなく、コントロールボックスに、だけでなく、その擬似クラスを制御します。

  リンク,:裏に書かれた,:アクティブこれらの疑似クラスを置く,:訪問:私たちは確かにラベルEDITORIAL、欲しいです。

  以下のような効果を達成するために、コードのフルバージョンです。

  サイトのセクション

  サイトのセクション

  サイトのセクション

  サイトのセクション

  サイトのセクション

  サイトのセクション

  サイトのセクション

  サイトのセクション

  リンクと::上記のコードは、我々は我々が定義するときにことがわかっこれら二つの疑似クラスを訪問し、そのプロパティであれば同じことが、実際には、我々は次の抜粋、などのコンマで区切って、一緒に書くことができます。

  .nav ULリチウムのA {

  表示ブロック;

  幅:120ピクセル;

  高さ:は50px;

  }

  / * 2つの擬似クラスの属性はコンマで分離してもよいです* /

  .navのULのli A:リンク、.navのULのli aは:訪問しました{

  テキスト装飾:なし;

  背景色:紫;

  色:白;

  }

  .navのULのLi A:ホバー{

  背景色:オレンジ;

  }

  上記のコードに示すように、最も標準的な書き込み、訪問、書き込まれるように三つのクラスの擬似ホバー、リンクすることです。しかし、リンクを記述しないことが判明たくさんの練習、フロントエンドの開発エンジニアは、非常に互換性のある訪問しました。文言は次のとおりです。

  A:リンク:内部の短いラベルで、省略することがすべてを訪問しました。つまり、リンクをカバーするラベルは、(同じ性質を持っているように提供)状態を訪問しました。次のように言葉を選びました:

  .nav ULリチウムのA {

  表示ブロック;

  幅:120ピクセル;

  高さ:は50px;

  テキスト装飾:なし;

  背景色:紫;

  色:白;

  }

  .navのULのLi A:ホバー{

  背景色:オレンジ;

  }

  もちろん、書き込み:リンクを、次の2つは、いずれかの同時書き込み、または同時に書いていない時に疑似クラスを訪問しました。場合は書き込み専用プロパティと:link属性は、標準化されていません。

  動的な擬似クラスの例

  私たちは、最初の段落で説明していた、すべてのラベルには、次の3つのダイナミック疑似クラスを適用することができます。

  :ホバー「ホバー」:ラベルの上にマウス

  :アクティブな「活性化」:タブをクリックしますが、手放すとき。

  :ラベルのスタイルがフォーカスを取得した時にフォーカスがある(例えば、入力ボックスにフォーカスがあります)


おすすめ

転載: blog.51cto.com/14503791/2441032