2021-1-24ウィンターホリデーウィークリー

より多くのセレクター

より多くの疑似クラスセレクター

1. 第一子

最初の子要素を選択します（最初の子要素である必要があります）

/* 选中a元素，并且a元素必须是第一个子元素 */
a:first-child{
    
    
	color: red;
}

<div>
    <a href="">Lorem.</a>
    <a href="">Numquam?</a>
    <a href="">Earum!</a>
    <a href="">Inventore.</a>
    <a href="">Expedita?</a>
    <a href="">Natus.</a>
    <a href="">Aliquam!</a>
    <a href="">Voluptates?</a>
    <a href="">Repudiandae?</a>
    <a href="">Quo?</a>
</div>

<div>
    <p>
        Lorem, ipsum dolor.
    </p>
    <a href="">Lorem.</a>
    <a href="">Numquam?</a>
    <a href="">Earum!</a>
    <a href="">Inventore.</a>
    <a href="">Expedita?</a>
    <a href="">Natus.</a>
    <a href="">Aliquam!</a>
    <a href="">Voluptates?</a>
    <a href="">Repudiandae?</a>
    <a href="">Quo?</a>
</div>

• first-of-type、子要素から指定されたタイプの最初の要素を選択します

/* 选中的是子元素中第一个a元素 */
a:first-of-type{
    
    
	color: red;
}

2. 最後の子

最後の子要素を選択します（最後の子要素である必要があります）

• last-of-type、子要素で指定されたタイプの最後の要素を選択します

3. n番目の子

指定された子要素を選択します

/* 必须是a元素，必须是第四个子元素 */
a:nth-child(4){
    
    
	color: green;
}

<div>
    <p>
        Lorem, ipsum dolor.
    </p>
    <a href="">Lorem.</a>
    <a href="">Numquam?</a>
    <a href="">Earum!</a>
    <a href="">Inventore.</a>
    <a href="">Expedita?</a>
    <a href="">Natus.</a>
    <a href="">Aliquam!</a>
    <a href="">Voluptates?</a>
    <a href="">Repudiandae?</a>
    <a href="">Quo?</a>
</div>

偶数：キーワード、2nに相当

/* 必须是a元素，必须是第偶数个子元素 */
a:nth-child(even){
    
    
    color: green;
}

奇数：キーワード、2n +1に相当

/* 必须是a元素，必须是第奇数个子元素 */
a:nth-child(odd){
    
    
    color: red;
}

4.4。 n番目のタイプ

指定されたサブ要素から特定のタイプの要素を選択します

a:nth-of-type(even){
    
    
    color: red;
}

<div>
    <p>Lorem, ipsum dolor.</p>
    <a href="">Lorem.</a>
    <a href="">Numquam?</a>
    <a href="">Earum!</a>
    <p>Lorem, ipsum dolor.</p>
    <a href="">Inventore.</a>
    <a href="">Expedita?</a>
    <a href="">Natus.</a>
    <a href="">Aliquam!</a>
    <a href="">Voluptates?</a>
    <p>Lorem, ipsum dolor.</p>
    <a href="">Repudiandae?</a>
    <a href="">Quo?</a>
</div>

より多くの疑似要素セレクター

1. 最初の文字

要素の最初の文字を選択します

p::first-letter{
    
    
    color: red;
    font-size: 2em;
}

2.2。 ファーストライン

要素のテキストの最初の行を選択します

p::first-line{
    
    
    color: red;
    font-size: 2em;
}

3.3。 選択

ユーザーが選択したテキストを選択します

p::selection{
    
    
    background-color: green;
    color: yellow;
}

その他のスタイル

透明性

1. 不透明度、要素全体の透明度を設定し、その値は0〜1です。
2. 色の位置に設定アルファチャンネル（rgba）、その値は0〜1です（場所は個別に設定できます）

マウス

使用するカーソルセットアップ

隠された箱

1. display:none、ボックスを生成しないでください
2. visibility:hidden、ボックスを生成します。ボックスを視覚的に削除するだけで、ボックスはまだスペースを占有します。

背景画像

• とimg要素の違い

img要素はHTMLの概念に属しています。
背景画像はCSSの概念に属しています。

1. 画像がWebコンテンツに属している場合は、img要素を使用する必要があります
2. 画像をページの美化にのみ使用する場合は、背景画像を使用する必要があります

• 関連するcss属性

1. background-image

2. background-repeat

デフォルトでは、背景画像は横軸と縦軸に繰り返されます

3. background-size

デフォルト値：contain、cover、object-fit
値またはパーセンテージと同様

4. background-position

背景画像の位置を設定します。

デフォルト値：左、下、右、上、中央（数値またはパーセンテージ）

5. background-attachment

通常、背景画像を固定するかどうかを制御するために使用されます。

6. 背景画像と背景色を混ぜる

7. スケッチ（省略形）の背景

iframe要素

<iframe src="" frameborder="0"></iframe>

通常、Webページに別のページを埋め込むために使用されます

• それは、交換可能な要素

• ラインボックス

• 通常、表示されるコンテンツは要素の属性によって異なります

• CSSはその中のスタイルを完全に制御することはできません

• ラインブロックボックスの特徴を持っています

ページでフラッシュを使用する

1. オブジェクト

<object data="" type=""></object>

• 置換可能な要素
  データ：リソース
  タイプの場所を示します：埋め込みリソースの形式を示します（標準形式：MIME）

MIME（Multipurpose Internet Mail Extensions）
多目的インターネットメールタイプ：たとえば
、リソースはjpg画像、MIME：image / jpegです。

• サブ要素を追加できます：param（パラメーターを示します。不明な情報とも呼ばれます）

2. 埋め込み

<embed src="" type="">

• 交換可能な要素

src：リソースの場所の
種類を示します：リソースの種類を示します

3. 互換性のある書き込み

<object data="./example.swf" type="application/x-shockwave-flash">
    <param name="quality" value="high">
    <embed quality="high" src="./example.swf" type="application/x-shockwave-flash">
</object>

ブラウザがオブジェクト要素を認識できる場合、埋め込みは無視されます。
オブジェクト要素を認識できない場合、埋め込みが認識されます（埋め込みはオブジェクトの子要素として使用できません）。