CSS 3セレクタ-擬似クラスセレクタ

擬似クラスセレクタ構文

E:pseudo-class {property:value}

E.class:pseudo-class{property:value}

Eは要素

である.

classクラス名

pseudo-classは偽クラス名

propertyはcssの属性

である.

valueはcssの属性値

である

構文1の例:

a:link {color:red;}

構文2の例:

a.selected:hover {color: blue;}

動的擬似クラス

動的擬似クラスは、HTMLには存在しないため、ユーザーとウェブサイトが相互作用している場合にのみ現れるため、動的擬似クラスには2つが含まれています.
1つ目は、リンクでよく見られるアンカー偽クラスです.例えば、「link」、「:visited」;
もう1つは、「:hover」:active、および「focus」などのユーザー行動擬似クラスと呼ばれる.

.demo a:link {color:gray;} /*              */
.demo a:visited{color:yellow;} /*             */
.demo a:hover{color:green;} /*               */
.demo a:active{color:blue;} /*                 */

:hoverは、ユーザーがマウスを要素の上に移動したときの効果に使用されます.

:activeユーザーが要素をクリックするための効果(点で発生している場合、マウスの左ボタンを離す動作も完了)

:focusは要素に焦点を当てるために使用され、これはフォーム要素によく使用されます.

場合:hoverはIE 6でa要素のみサポートされ、:activeではIE 7-6のみサポートされず、focusではIE 6-7でサポートされていません.

UI要素ステータス擬似クラス

「enabled」、「:disabled」、「:checked」擬似クラスをUI要素ステータス擬似クラスと呼び、主にHTMLのForm要素操作に使用されます.
IE 6-8は「:checked」、「:enabled」、「:disabled」の3種類のセレクタをサポートしていません.

CSS 3の：nthセレクタ

この節の内容こそ肝心であり、CSS 3セレクタの最新部分でもあり、このセレクタをCSS 3構造クラスと呼ぶ人もいる.
:nthセレクタ
説明
:first-child
エレメントの最初のサブエレメントを選択します.
:last-child
エレメントの最後のサブエレメントを選択します.
:nth-child()
ある要素の1つ以上の特定のサブ要素を選択します.
:nth-last-child()
ある要素の1つ以上の特定のサブ要素を選択し、この要素の最後のサブ要素から計算します.
:nth-of-type()
指定した要素を選択します.
:nth-last-of-type()
指定した要素を選択し、要素の最後の要素から計算を開始します.
:first-of-type
親要素の下にある最初の同類サブ要素を選択します.
:last-of-type
親要素の最後の同類サブ要素を選択します.
:only-child
選択した要素はその親要素の唯一の要素です.
:only-of-type
1つの要素が親要素の唯一の同じタイプのサブ要素であることを選択します.
:empty
選択した要素には何もありません.

:first-child

エレメントの最初のサブエレメントを選択します.

:last-child

エレメントの最後のサブエレメントを選択します.

:nth-child()

エレメントの1つまたは複数の特定のサブエレメントを選択します.
使用方法
説明
:nth-child(length);
パラメータは具体的な数値です
:nth-child(n);
パラメータはn,nは0から計算を開始する
:nth-child(n*length);
nの倍数選択、nは0から計算
:nth-child(n+length);
lengthより大きい要素を選択
:nth-child(-n+length);
lengthより前の要素を選択
:nth-child(n*length+1);
何度も何度も何度も何度も何度も何度も何度も何度も何度も何度も何度も何度も何度も何度も何度も何度も何度も何度も

:nth-last-child()

前の「nth-child」とは異なり、最後の要素から計算する限り、特定の要素を選択します.
最後から数番目の要素を選択します.

:nth-of-type()

:nth-of-typeは、nth-childと似ています.セレクタで指定された要素だけを計算するのとは異なり、前の例では具体的な要素を指定しています.

:nth-last-of-type()

逆数.

:first-of-type

一番目.

:last-of-type

最後の1つ.

:only-child

1つの要素は、その親要素の唯一のサブ要素です.

:only-of-type

:only-of-typeは、1つの要素を表すものです.彼は多くのサブ要素を持っていますが、そのうち1つのサブ要素だけが一意である場合、この選択方法を使用して、この唯一のサブ要素を選択することができます.

:empty

:emptyは何もない要素を選択するために使用されます.ここには内容がありません.スペースが1つでもありません.例えば、3つの段落があります.1つの段落は何もありません.完全に空いています.このpは表示されないと思います.では、このように書くことができます.

p:empty {display: none;}

否定セレクタ(:not)

否定セレクタ:not()で、セレクタに一致しない要素を位置決めできます.

ぎじげんそ

::first-line

要素の最初の行を選択

::first-letter

テキストブロックの最初の文字を選択

::beforeおよび::after

この2つは主に要素の前または後ろに内容を挿入するために使用され、この2つの一般的な「content」が組み合わせて使用され、最も多く見られるのはフローティングをクリアすることです.