擬似クラス（クラスセレクタ擬似）
擬似クラス：タグと、そのに応じて異なる状態、異なるスタイル。これは、「疑似クラス」と呼ばれています。疑似クラスは、コロンで表されます。
たとえば、divのクラスは、カテゴリボックスに属している、非常に明確であるボックスを属します。しかし、何がクラスに属していますか？それは明らかではありません。そのため、ユーザーがクリックしたものを状態を確認する必要があるため、状態は何をクリックしてください。だから、「疑似クラス」と呼ば
擬似静的および動的擬似クラスクラス
2つの擬似クラスセレクタに分割されます。
（1）静的擬似クラス：のみのためのハイパーリンクのスタイル。次のように：
:linkハイパーリンクをクリックする前に:visitedリンクが訪問された後、
PS：これらの2つのスタイルは、唯一のハイパーリンクのために使用することができます。
（2）ダイナミック疑似クラス：については、すべてのラベルが適用スタイルです。次のように：
:hover「ホバー」：ときのラベルの上にマウス:active「活性化」：タブをクリックしますが、手放すとき。:focusラベルのスタイルがフォーカスを取得した場合（例えば、入力ボックスにフォーカスがあります）
PS：上記の3つのスタイルは、唯一のハイパーリンクのために使用することができます。
ラベルをハイパーリンク
ハイパーリンクの四つの状態
ラベル（すなわち、四つの状態に相当）、暗唱するのに必要な4つの擬似クラスを有しています。次のように：
:link「リンク」：ハイパーリンクをクリックする前に:visited「訪問」：リンクが訪問された後、:hover「ホバー」：ときのラベルの上にマウス:active「活性化」：タブをクリックしますが、手放すとき。
次のようにコメント:(なし）対応するコードであります
a:link{
color:red;
}
a:visited{ color:orange; } a:hover{ color:green; } a:active{ color:black; }次のように対応するコードである:(注釈します）
/*让超链接点击之前是红色*/
a:link{
color:red;
}
/*让超链接点击之后是绿色*/ a:visited{ color:orange; } /*鼠标悬停，放到标签上的时候*/ a:hover{ color:green; } /*鼠标点击链接，但是不松手的时候*/ a:active{ color:black;覚えておいて、CSS、これら四つの状態が一定の順序で記述する必要があります。
A：リットルのインク、：訪問、：ホバー、：アクティブ
あなたは順序に従わない場合、それは失敗します。「愛とガイドラインは、」：憎しみを愛します。あなたは憎しみの後に愛さなければなりません。
アクションフィギュア四つの状態の影響を見てください：
ハイパーリンクの造園
Q：今では、a{}ハイパーリンクのプロパティを定義し、a:link{}ハイパーリンクをクリックする前に属性を定義し、これらの二つはそれがどのような違いを生むんこと？
回答：
a{}そして、a:link{}の違い：
a{}すべてのハイパーリンクのスタイルを定義した（アンカー含みます）a:link{}（アンカーを含まない）、ハイパーリンクのすべての書かれたhref属性のために定義されたスタイル
使用中に、より困難であるとき、ラベルをハイパーリンク。このためだけでなく、コントロールボックスに、だけでなく、その擬似クラスを制御します。
我々は確かになり、ラベルEDITORIALをしたい:link、:visited、:hover、:activeこれらの疑似クラスは、背中に書かれました。
たとえば。効果の場合：
以下のような効果を達成するために、コードのフルバージョンです。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>Document</title> <style type="text/css"> *{ margin: 0; padding: 0; } .nav{ width: 960px; height: 50px; border: 1px solid red; margin: 100px auto; } .nav ul{ /*去掉小圆点*/ list-style: none; } .nav ul li{ float: left; width: 120px; height: 50px; /*让内容水平居中*/ text-align: center; /*让行高等于nav的高度，就可以保证内容垂直居中*/ line-height: 50px; } .nav ul li a{ display: block; width: 120px; height: 50px; } /*两个伪类的属性，可以用逗号隔开*/ .nav ul li a:link , .nav ul li a:visited{ text-decoration: none; background-color: purple; color:white; } .nav ul li a:hover{ background-color: orange; } </style> </head> <body> <div class="nav"> <ul> <li><a href="#">网站栏目</a></li> <li><a href="#">网站栏目</a></li> <li><a href="#">网站栏目</a></li> <li><a href="#">网站栏目</a></li> <li><a href="#">网站栏目</a></li> <li><a href="#">网站栏目</a></li> <li><a href="#">网站栏目</a></li> <li><a href="#">网站栏目</a></li> </ul> </div> </body> </html>上記のコードは、我々は我々が定義するときにことが判明a:linkし、 a:visited2つの擬似クラスを、そのプロパティの場合と同じで、私たちは実際に、以下の抜粋のようにコンマで区切って、一緒に書くことができます。
.nav ul li a{
display: block; width: 120px; height: 50px; } /*两个伪类的属性，可以用逗号隔开*/ .nav ul li a:link , .nav ul li a:visited{ text-decoration: none; background-color: purple; color:white; } .nav ul li a:hover{ background-color: orange; }上記のコードに示すように、最も標準的な書き込み、訪問、書き込まれるように三つのクラスの擬似ホバー、リンクすることです。しかし、リンクを記述しないことが判明たくさんの練習、フロントエンドの開発エンジニアは、非常に互換性のある訪問しました。文言は次のとおりです。
A：リンク：内部の短いラベルで、省略することがすべてを訪問しました。つまり、リンクをカバーするラベルは、（同じ性質を持っているように提供）状態を訪問しました。次のように言葉を選びました：
.nav ul li a{
display: block; width: 120px; height: 50px; text-decoration: none; background-color: purple; color:white; } .nav ul li a:hover{ background-color: orange; } もちろん、書面でa:link、a:visitedこれらの二つの擬似クラスは、どちらかと同時に書き込み、または同時に書き込みません。書き込み専用場合aの特性やa:link属性、標準化されていません。
動的な擬似クラスの例
私たちは、最初の段落で説明していた、すべてのラベルには、次の3つのダイナミック疑似クラスを適用することができます。
:hover「ホバー」：ときのラベルの上にマウス:active「活性化」：タブをクリックしますが、手放すとき。:focusラベルのスタイルがフォーカスを取得した場合（例えば、入力ボックスにフォーカスがあります）
私たちは、次の例を与えることを望みます。
例1：
<style type="text/css"> /* 伪类选择器：动态伪类 */ /* 让文本框获取焦点时： 边框：#FF6F3D这种橙色 文字：绿色 背景色：#6a6a6a这种灰色 */ input:focus{ border:3px solid #FF6F3D; color:white; background-color:#6a6a6a; } /* 鼠标放在标签上时显示蓝色 */ label:hover{ color:blue; } /* 点击标签鼠标没有松开时显示红色 */ label:active{ color:red; } </style>効果：
この使用方法hover：プロパティを、我々は設定のパターンを形成するために同じことを行う
テーブル、たとえば：
<!doctype html>
<html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <title>Document</title> <style type="text/css"> /*整个表格的样式*/ table{ width: 300px; height: 200px; border: 1px solid blue; /*border-collapse属性：对表格的线进行折叠*/ border-collapse: collapse; } /*鼠标悬停时，让当前行显示#868686这种灰色*/ table tr:hover{ background: #868686; } /*每个单元格的样式*/ table td{ border:1px solid red; } </style> </head> <body> <table> <tr> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> </tr> </table> </body> </html>