CSS3-新しいプロパティ-構造セレクター_html/css_WEB-ITnose

前回のエッセイでは、CSS3 のタグの属性を通じて特定のタグを見つける方法を紹介しました。この記事では、構造セレクターを使用して特定のタグを選択します。 -child と -of-type により、2 つのカテゴリに分類できます。 -child は親タグの子ノードを検索することを意味し、-of-type はタグ タイプに基づいて親タグの子ノードを検索することを意味します。

1. -child

R：nth-​​child(value){}

(1) value=1,2,3,...の意味：Rタグの親タグ内で、上から順に検索Bottom 値のサブノード、およびラベルのタイプは有効である必要があります

(2) value= 1n, 2n, 3n、つまり、R ラベルの親ラベルで 1n、2n、を検索します。または、上から下へ 3n 番目の子ノード、ラベルのタイプは有効である必要があります。ここで、n は負でない整数をとります

(3) value= 奇数、偶数、つまり、次のことを意味します。 R ラベル、偶数または上から下への偶数を検索します。子ノードの数が奇数で、ラベルのタイプが有効である必要があります

R: nth-last-child(value){}

使用法はR と同じ: nth-child(value) の (1) (2) (3) 点は同じですが、唯一の違いは、子ノードが R タグの親タグ内で下から上に検索されることです。

2. -of-type

R: nth-of-type(value){}

( 1) value=1,2,3,..., 意味: R の親ラベル内label、タイプ R の value 番目の子ノードを上から下に探します

(2) value= 1n, 2n, 3n、意味: R ラベルの親ラベルで、1n、2n、またはタイプ R の上から下への 3n 番目の子ノード。n は負でない整数です。

(3) value= od, Even 、意味: R タグの親タグ内で、偶数番号または奇数番号の子ノードを検索します。型 R を上から下へ;

R: nth-last-of-type(value){}

使い方と R: (1) (2) (3) of nth-of-type(value) は同じですが、唯一の違いは、R ラベルの親ラベル内で下から上に R 型の子ノードを探すことです

3 、特定のタグ タイプを指定しません

body *：nth-​​child(value; ){}

body *：nth-​​last-child(value){}

body *：nth-​​of-type(value){}

body *：nth-​​last-of-type(value){}

bodyが親要素であることを示し、bodyの下に子ノードを探します

4. あまり使われない構造属性

R: first-child == R: nth-child(1)

R:last- child == R：nth-​​last-child(1)

R: first-of-type == R : nth-of-type(1)

R :last-of-type == R : nth-last -of-type(1)

セレクターについては、一般的に使用されるものをいくつか覚えてください。名前に基づいて意味を確認できます。 -child 親の子ノードを参照します。次に、前のタグのタイプを同時に満たしますが、 -of-type はタグのタイプを調べます。