CSS3 と新しい selectors_html/css_WEB-ITnose の概要

1: 基本的な紹介

1: CSS バージョン

css1: Web ページの基本プロパティを定義します: フォント、色、フィラー、基本セレクターなど。
css2: 高度な機能を追加しました: フローティング、位置決め、高度なセレクター (子セレクター、隣接セレクター、ユニバーサル セレクター)
css3: モジュール開発に従います。リリース時間は時点ではなく、期間です。 (2002-現在)


2: css3 の新機能
(1) CSS セレクター
(2) 新しいカラー システムと透明度の設定
(3) 複数列レイアウトの実装
(4) 複数の背景画像 効果
(5) テキストシャドウ効果
(6) オープンウェブフォントタイプ
(7) 角丸
(8) ボーダー背景画像
(9) ボックスシャドウ

(10) メディアクエリ

two : New selector

Css3新規セレクター
(1)css3属性セレクター
(2)css3構造擬似クラスセレクター
(3)css3 UI要素ステータス擬似クラスセレクター
(4)その他の新規追加セレクター

1:兄弟セレクター

優秀作品トップ 10中国の人たち

①他人の子供

②他人の父親

③他人の母親

④他人の夫

⑤他人の妻

⑥他人の義父

⑦他人の義母

⑧他人の会社

⑨他人の領収書

⑩他人の従業員

注: (1)最初の p タグは選択せず、その兄弟のみを選択してください
(2) 以下のみを選択します 兄弟タグは前方に選択できません。


2: 構造体擬似クラスセレクター
(1) 子系列
最初の子の正の数
最後の子の逆数




nth-child(n);
nth-child(3n+1) 2 つごと1 つ選択します
nth-child(even); nth-child(2n) 偶数
nth-child(odd) ; nth-child(2n+1) 奇数



nth-last-child(n)
その他は上記と同じ


only-child 唯一の子要素、only child
例: li:only-child{color:#f00;font-size:30px}




例:
p:first- child{color:#f00;}

残念ながら、私は父親の最初の子要素です。私は p タグではないので、選択できません。I

私は父の 2 番目の子要素です

私は父の 3 番目の子要素です< /p>

私は父親です 4 番目の子要素です

私は父親の 5 番目の子要素です

< p>私は父親の 1 番目の子要素であり、p タグであるため、選択されました

私は の 2 番目の子要素です父親

私は父親の3番目の子要素です

私は父親の4番目の子要素です

私は5番目です私の父の子要素

(2) of-type シリーズ
fix-of-type
last-of-type
nth-of-type(n)
nth-last -of-type(n)
のみ-of-type
は子シリーズに似ていますが、類似したタグのみに焦点を当て、類似したタグのみをカウントします。

(3)empty


(4)root
html:root{background:green}
は
html{background:green}
と同等です。 html のルートは常に html 要素、つまり html ページ全体です。本当の意味はありません。