二、CSS擬似クラスと擬似要素

1.UI擬似クラス

UI(User Interfaceユーザーインタフェース)の擬似クラスは、HTML要素がある状態にあるときに、マウスポインタなどのCSSスタイルをその要素に適用します.

1.1擬似クラスのリンク

link:リンクの最初の状態;

visited:リンクがクリックされた状態;

hover:マウスポインタがリンクにぶら下がったときの状態;

active:リンクがクリックされており、マウスはまだ解放されていません.

a:link {color:yellow;}
a:visited {color:blue;}
a:hover {text-decoration:none;}
a:active {color:red;}
//             yellow，                ，
//           red，           blue。
/*
      ，         ，               ，
         。                ，      4 。
*/

注意:p:hover{background-color:blue;}などの任意の要素に使用できる擬似クラスもあります.

1.2:focus擬似クラス

e:focus,eは任意の要素を表し、その要素が焦点を得るときに作用する.

input:focus {border:1px solid blue;}
//     input    ，            。

1.3:target擬似クラス

e:target、ページ内の他の要素へのリンクをクリックすると、その要素がターゲット(target)になりますが、:target擬似クラスを使用して選択します.

<a href="#more">1a>
<p id="more">It's the information you are looking for.p>
//CSS  
#more:target {background:#eee;}
//         id more    ，           。

2.構造化擬似クラス

構造化された擬似クラスは、タグに構造上の関係がある場合、対応する要素にCSSスタイルを適用します.たとえば、要素が要素のセットの最初の要素または最後の要素です.

2.1:first-childと:last-child

e:first-childは、兄弟要素のセットの最初の要素を表します.e:last-childは、最後のものを表します.

ol.test li:first-child {color:green;}

<ol class="test">
    <li>firstli>
    <li>secondli>
    <li>thirdli>
ol>
//  “first”    ， first  last    “thirs”    。

2.2 :nth-child

e:nth-child(n)で、nは数値であり、oddまたはevenを使用することもできる.

//           ， first，         。
li:nth-child(1) {color:blue;}

//                     ， “first” “third”。
//            ， “second”。
//:nth-child            。
li:nth-child(odd) {color:blue;}
li:nth-child(even) {color:gray;}

3.擬似要素

擬似要素は、ドキュメントに実在しない要素がある場合、1つのコロン(:)は擬似クラスを表し、2つのコロン(:)は擬似要素を表すが、実際には2つのコロンはいずれも使用できることに注意してください.ここでは、よく使われる擬似要素をいくつか紹介します.

3.1 ::first-letter

e::first-letter

p::first-letter {font-size:200%;}
//                 。

3.2 ::first-line

e::first-line

p:first-line {color:blue;}
//               ，                   

3.3::beforeと::after

e::before e::after

"age">25

//      "Age: 25 years."
p.age::before {content: "Age: ";}
p.age::after {content: " years.";}

注意:検索エンジンは偽要素の情報を取得しません.そのため、検索エンジンのインデックスを検索したい重要な内容を偽要素で追加しないでください.