CSS3 複合セレクター、コンテンツ生成、multi-column_html/css_WEB-ITnose

1. 隣接する兄弟セレクター

P+b: 同じ親要素の下にある p タグの後の最初の兄弟要素 b;

2. ユニバーサル兄弟セレクター

p~b: 同じ親すべての兄弟要素 b要素の下の p タグの後;

3. 属性セレクター

指定された要素属性または価値のある要素を取得するには、要素属性を使用します。

[Attribute]: " "All" 要素を指定された属性";

Element[attribute]: 「指定された」要素と「指定された属性」を照合します;

input[type]: type 属性を使用して入力を取得します;

input[id]: を使用して入力を取得しますtype 属性 id 属性の入力;

要素 [attribute] [attribute]: 「複数の指定された属性」の「指定された」要素と一致します。

要素 [attribute="value"]: 「the」の「指定された」要素と一致します。指定された属性は値と等しい" Element;

Element[attribute~="value"]: 「指定された属性にこの値が含まれる (独立語)」を持つ「指定された」要素と一致します;

Element[attribute^="value "]: "指定された属性" と一致します。 指定された値で始まる "指定された" 要素と一致します。

要素 [attribute *="value"]: "指定された属性に値が含まれる "指定された" 要素と一致します (依存語)";

element [attribute $= "value"]: 「指定された属性が指定された値で終わる」場合の "specified" 要素と一致します;

Element [attribute!="value"]: 「指定された属性が値と等しくない」要素。

4. ターゲット疑似クラス

現在アクティブなターゲット要素を選択するために使用されます。

:target はすべてに一致します。アクティブ アンカー

Element:target は、指定された要素のアクティブ アンカーと一致します

5. 要素のステータス 疑似クラス

主に要素の無効、有効、選択されたステータスと一致します

フォーム要素で主に使用されます

:disabled と一致します。すべての無効な要素

:enabled はすべての有効な要素と一致します

:checked は無効なすべての要素と一致します 選択された要素は、ラジオの選択とチェックの選択に使用されます

6. 要素構造から分割します。構造体);

用途: 最初のサブ要素、最後のサブ要素の検索、サブ要素なしの要素、子要素が 1 つだけ含まれる

:first-child 親要素

の最初の子要素と一致します

: last-child 親要素の最後の子要素と一致します

:empty 子要素のない要素と一致します

:only -child 子要素が 1 つだけある要素と一致します

ul > li:nth-child(2n+1) { do something} //ul

E の 2n+1 (奇数) li 要素を選択するために使用されます: nth-of-type() は、要素にそれ以上の要素がある場合、特定の型の子要素のみをカウントします。 1 つの子要素タイプよりも、nth-of-type を使用して選択する方が便利です。

E:nth-last-of-type() の使用法は E:nth-of-type() と同じですが、違いは:nth-last-of-type() も最後の子から始まることです。親要素の要素をカウントアップします。

li:nth-of-type(3) は、3 番目の li 要素のみを選択し、他の要素は無視されることをマークします

7. 疑似クラスを否定します

input:not([type="text "]){color:red;}

input:not(:last-child){background:blue;}

8. 疑似要素セレクター

:first-letter は、指定されたセレクターの最初の文字を選択します。

p:first-letter{

font-size:40px;

}

それらの束は、植字、最初の文字の強調表示などに使用されます

:first-line は、文字の最初の行を選択します。指定されたセレクター;

::selection ユーザーが選択した部分と一致します。

選択されたテキストなど

::selection{background:#ccc;color:red} // このように書き換えた後、背景色と選択したテキストのテキストの色はカスタマイズできますが、必要があります。::selection は 2 つの属性のみを受け入れ、1 つは背景、もう 1 つは色であることに注意してください。