【css技術マニュアルノート】第二章セレクタ偽類
セレクタサブセレクタ:div>a;結果:Linkは、すべての孫 を含まず、すべての息子しか選択できないという意味です.近隣同胞選択子:h 2+p;結果: 一般同胞セレクタ: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;} ブラウザのリンクが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 p.age::before{content:"Age: ";} p.age::after{content:"years."} 結果:Age:24 years.
<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>This is paragraph
擬似クラス
2つに分けられる:1、UI擬似クラス、ある状態、例えばaマウスのサスペンション;2、構造化された擬似クラス、例えばあるグループの要素の第一または最後の
This is the information you are looking for.
24