【css技術マニュアルノート】第二章セレクタ偽類

セレクタ

<div>
    <h2>An H2</h2>
    <p>This is paragraph</p>
    <p>Paragraph 2 has <a href="#">a link</a></p>
    <a href="#">Link</a>
</div>

サブセレクタ:div>a;結果:Linkは、すべての孫

を含まず、すべての息子しか選択できないという意味です.

近隣同胞選択子:h 2+p;結果:

This is paragraph

一般同胞セレクタ:h 2~a;結果:Linkは、h 2以降の兄弟(同世代要素)が選択され、h 2以前のaは選択されない

である

汎用セレクタ:div*a;結果a linkdivの孫a

を選択

属性セレクタ:a[href]aラベルhref属性がある

を選択

a[href=#]aラベルhref属性が#の

を選択
擬似クラス
2つに分けられる:1、UI擬似クラス、ある状態、例えばaマウスのサスペンション;2、構造化された擬似クラス、例えばあるグループの要素の第一または最後の

UI擬似クラス;1つのコロン:偽クラスを表し、2つのコロン::CSS 3に追加された偽クラスを表す

は偽クラスをリンクし、複数使用する必要がある場合は、できるだけl v h aの順序に従います:

a:link通常状態、クリックされるのを待つ

a:visitedはすでに

をクリックしました(アクセスしました)

a:hoverマウスサスペンション

a:activeがクリックされている、マウスが押した状態

:focus擬似クラス、要素フォーカスを取得するとinput:focus{border:2 px solid#444;

:target,例:

#more_info:target{background:#eee;}

This is the information you are looking for.

ブラウザのリンクがsmartisanである場合.com#more_infoの場合、h 2の背景は#eee

になる

構造化擬似クラス:

:first-child :last-child

li:first-child選択したのはliグループの最初のliで、liの最初の子供

ではありません.

nth-child 

li:nth-child(2)2番目のliを選択し、カウントは0から

ではありません.

li:nth-child(odd)奇数列、li:nth-child(event)偶数列

擬似要素!擬似要素の情報は検索エンジンによって取得されない

p::first-letter{font-size:200%;} pの最初の文字を選択します.効果:abc

p::first-line{font-variant:samll-caps;} pの最初の行をすべて大文字に変更し、ブラウザサイズによって最初の行が異なる

::before::after

24

p.age::before{content:"Age: ";}

p.age::after{content:"years."}

結果:Age:24 years.