CSS3の新機能まとめ(セレクター)_html/css_WEB-ITnose

CSS3 には 21 個のセレクターが追加されました。スクリプトはコンソールを通じてここで実行されます。

~:

p ~ p {    color : red;/*此条规则将用于p后边所有的p...就是除了第一个p的所有p,规则同p:not(:nth-of-type(1)),但是权重要低于后者*/}

[attribute^=value]:

属性が特定の値で始まる要素を選択します

[attribute$=value]:

属性が特定の値で終わる要素を選択する

[attribute*=value]:

この属性に特定の値が現れる要素を選択する

上記の 3 つは、 ↓のように組み合わせて使用​​できます:

実際には、http.com などが存在するかどうかを判断することで、ローカルリンクと外部リンクを区別するために使用できます ( CSS4 セレクターが出てきます [: local-link])

:first-of-type と :last-of-type:

おそらく言葉から、このタイプの最初のもの/最後のもの、それが何であるかがわかるでしょう。このタイプの...

上の図に示すように、各要素の最初の p と最後の p にはこのスタイルが適用されます;

:only-of-type:

この子要素を 1 つだけ選択してくださいtype、no 子要素を含む子要素;

次を使用できます: 逆選択を実現しないようにします

:only-child:

子要素が 1 つだけある要素を選択します;

前にある p を削除すると:このスタイルはスパンにも適用されます

: を使用して選択を反転することもできます

簡単に言えば、スタイルは兄弟ノードを持つ p に適用されます

:nth-child (n):

n 番目の子を選択します セレクターを組み合わせることで要素を制限できます

変数 n (キーワード == と言うべきです) と組み合わせて、テーブルやリストの交互の行の色を変更するために使用できます

:nth-last-child( n):

基本的に上記と同じ...後ろから前に数えるだけです

:nth-of-type(n):

これは上にあるもので、気になります - -この 2 つの違いがいつも気になっています。非常に厄介です。詳細については、下の図を参照してください

w3school を通じて作成されました。

p:nth-child(2) は、親要素の子要素の 2 番目の p を赤に設定し、

p :nth-of-type(2) は子要素の 2 番目の p の背景色を緑に設定します - とても面倒です;

2 つは、nth-of-type がタグ タイプをカウントしてフィルタリングすることです。nth-child カウントはフィルタリングされません。

:nth-last-of-type(n):

これは説明されていません...逆に

:last-child:

親要素の最後の子要素を選択します

trの後の擬似クラスの位置に注意してください、これはスペース1つ分です == 上が最後のtrです選択されており、その下の要素は選択された tr;

:root:

ドキュメント ルート ノードを選択します - - html {} と同等ですが、疑似クラスであるため、重みは html よりも高くなります。そして、ポイントクラスはラベルよりも上位です - -;

:empty:

子要素のないラベルを選択してください。まあ、これは正常です。一般に、テーブルには空のセルがあり、テキストノードもノードであるため、あまり役に立ちません。これは、js を使用して空の要素を選択する場合に非常に便利です。

:target:

W3C による説明 実際には、任意の接頭辞が付けられるアクティビティ ID を設定するスタイルです。ブラウザパス上の # は送信配列を選択します。

:enabled および :disabled:

:enabled が使用可能かどうかに使用される疑似クラス。 :disabled はその逆です。チェック済み:

複数選択と単一選択に使用される疑似クラス selected;

:not:

これについては多くは言いません - 私は上でたくさん使用しました

::selection:

選択したテキストのスタイル;

概要:

CSS3 セレクターは、上記に何か間違っていることや詳しく説明されていないことがあれば、指摘してください。(笑)

いくつかの参考リンク:

http://www.w3school.com.cn/cssref/css_selectors.asp

さらに CSS4 プレビューをいくつか

http://www.admin10000.com/document/5900.html

http://www. webhek.com/css4-selectors/

http://www.iinterest.net/2011/10/09/css4-selectors-level-4/