CSS3 メモ_html/css_WEB-ITnose

CSS3

1. CSS3 セレクター

* ワイルドカード セレクター;

#idID セレクター;

selector1、selector2 グループ セレクター;

レベルセレクター

E F 子孫セレクター、F 要素を選択し、F は E 要素に含まれます;
E>F 子セレクター、F 要素を選択し、E の子要素です。

E+F 隣接する兄弟セレクター、F 要素をすぐに選択します。一致する E 要素に隣接する

動的擬似クラス セレクター

E:active の後に F に一致するすべての要素を選択します。 , E:hover, E:focus ユーザー動作セレクター;

Target 疑似クラス セレクター

E:target は E に一致する要素を選択し、一致する要素は関連 URL によってポイントされます

リンクをクリックすると、選択した要素 E は変更できます。その効果は Zhihu で特定の回答リンクを入力した場合と同様で、回答の背景が点滅します。

さらに、アコーディオンのような効果、ハイライトされたブロック、タブ、スライドショー、ライトボックス、フォトアルバム、その他の効果を作成することもできます。

言語擬似クラスセレクター

E:lang( language)

言語エンコーディングに従って要素を照合します: ドキュメントの言語を指定するには、次の 2 つの方法があります:

ドキュメントの言語を直接設定する

873563b094e7abe73d2bed7d9a12a11f

ドキュメント内で lang 属性を手動で指定します

e3d4e57fab862c8ef6f1ee0e290684f4

• 
  
  

  UI 要素ステータス疑似クラスセレクター
• E: チェックされた選択状態

  E: 有効化された有効状態
  E: 無効化されて借用されていない状態

構造疑似クラスセレクター

構文

E: first-child は E の最初の子要素を選択します

E: last-child は E の最後の子要素を選択します
root はドキュメントのルート要素、つまり html
E を選択します F:nth-child(n) は親要素 E の n 番目の子要素 ​​F を選択します、n は整数、キーワード(偶数、奇数)、式(2n+1、-n+5)、nの初期値は1

E F:nth-last-child(n)は上記と同じ仕組みですが、逆です。 order

E:nth-of-type(n) の選択 親要素

E:nth-last-of-type(n) 内の指定された型を持つ n 番目の E 要素は、上記と同じメカニズムを持ちますが、順序が逆になります。

E:first-of-type

E:last-of-type

E:only-child
E:only-of-type
E:empty は子要素のない E を選択し、その要素にはテキスト ノードが含まれません



Negative pseudo-class selector

:not() 選択 footer、:hover、type=radio など、括弧内の条件を満たさない要素



疑似要素

::first-文字はテキストブロックの最初の文字を選択するために使用され、一般的には最初の文字が沈む効果です

::first-line はテキストブロック内のテキストの最初の行を選択します

::before、::after は存在するコンテンツではありませんマークアップ内で、追加のコンテンツを挿入できる場所を示します。生成されたコンテンツは DOM の一部にはなりませんが、引き続き Set スタイルにすることができます。

::selection は強調表示されたテキストを設定し、背景と色の値を設定する必要があります。

/*webkit,opera9.5+,IE9+*/::selection{    background:blue;    color:white;}/*Mozilla Firefox*/::-moz-selection{    background:blue;    color:white;}

10. ####属性セレクター

E[attr] は、attr 属性を持つ E 要素を選択します。省略され、タイプに関係なく、定義された attr 属性を持つすべての要素が選択されることを示します。

E[attr=val] は attr 属性を持つ E 要素を選択し、attr の値は val (大文字と小文字を区別します) です。 val] は attr 属性を持つ要素を選択します。 attr 属性を持つ E 要素、および attr の値は val または val- で始まる属性値です。

E[attr~=val] は attr 属性を持つ E 要素を選択します。 attr の値はスペースで区切られた複数の値で、val

E[attr*=val] の attr 属性を持つ E 要素を選択し、attr 値の任意の位置に val 文字列
E[attr^=val] が含まれます。 ] は attr 属性を持つ E 要素を選択し、attr の値は val で始まる任意の文字列です。
E[attr$=val] は attr 属性を持つ E 要素を選択し、attr の値は val で終わる任意の文字列です。
りー