css3セレクター(2)_html/css_WEB-ITnose-htmlチュートリアル-php.cn

css3セレクター(2)_html/css_WEB-ITnose

WBOY

リリース： 2016-06-24 11:39:02

オリジナル

1090 人が閲覧しました

css3 セレクター (1) に接続されています

8. 構造擬似クラスセレクター [:nth-child(n)]

:nth-child(n) セレクターは、親要素の 1 つ以上の特定の要素と一致するために使用されます。子要素はjqueryと同じです。

ここで、「n」はパラメータであり、整数値 (1,2,3,4)、式 (2n+1、-n+5)、およびキーワード (奇数 [奇数]、偶数 [偶数])、ただしパラメーター n の開始値は 0 ではなく、常に 1 です。つまり、パラメーター n の値が 0 の場合、セレクターは一致する要素を選択しません。

注: ":nth-child(n)" セレクターの n が式の場合、n は 0 から計算され、式の値が 0 または 0 未満の場合、何も選択されません一致する要素。以下の表に示すように:

したがって、横断歩道の効果を達成するのは非常に簡単です。

偶数行はオレンジ色になります、ol > li:nth-child(2n|even){background:orange};

奇数行は緑色になります、ol > 1|2n-1| 奇数){背景: 緑;}

9. 構造擬似クラスセレクター [:nth-last-child(n)]

:nth-last-child(n) は :nth-child に似ています(n), but has more 後ろから前という意味の最後があり、他の箇所には違いはありません。

例: リスト内の最後から 5 番目のリスト項目の背景色をオレンジに設定します。

<style type="text/css">    ol > li:nth-last-child(5){  background: orange;}</style><ol>  <li>item1</li>  <li>item2</li>  <li>item3</li>  <li>item4</li>  <li>item5</li>  <li>item6</li>  <li>item7</li>  <li>item8</li>  <li>item9</li>  <li>item10</li></ol>

ログイン後にコピー

10. [:first-of-type] セレクター

: first-of-type セレクターは :first-child セレクターと似ていますが、違いは が要素の型を指定することです。主に使用される親要素の下にある特定の型の最初の子要素を見つけるために使用されます。

個人的には、次のように思います。第一子は、第一子の下位区分であり、ケーキの飾りです。

例: div コンテナーの最初の p 要素のスタイルを設定します。

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>选择器</title> <style type="text/css"> /*p元素的父元素的第一个子元素是div而不是p元素，因此该样式不起作用*/ p:first-child{ color: red; } /*此时不用first-of-type,更待何时*/ p:first-of-type{ color: blue; } </style> </head> <body> <div class="wrapper"> <div>第一个子元素是div元素</div> <div>第二个div元素</div> <p>第一个p元素</p> <p>第二个p元素</p> </div> </body> </html>

ログイン後にコピー

この名前: first-of-type は、型の最初の子要素を表す明らかな子要素が存在しないため、first-type と呼ぶ方がよいと思います。 -child 上記と同様に、nth-last-child(n) は nth-child(n) の拡張です。

11. [:last-of-type] セレクター

:last-of-type セレクターは、:first-of-type と同じ機能を持ちます。違いは、最後の子要素の下にある特定の型と一致することです。要素。

例: コンテナ「div.wrapper」内の最後の Div 要素の背景をオレンジに設定します。

<!DOCTYPE html><html><head> <meta charset="utf-8"><title>选择器</title><style type="text/css">.wrapper > div:last-of-type{  background: orange;}</style></head> <body><div class="wrapper">  <div>我是第一个Div元素</div>  <div>我是第二个Div元素</div>  <div>我是第三个Div元素</div>  <p>我是第一个段落</p>  <p>我是第二个段落</p>  <p>我是第三个段落</p></div></body></html>

ログイン後にコピー

12. [:nth-of-type(n)] セレクター

もう 1 つの of-type、これを見れば理解できるはずです、this:nth-of-type(n) は拡張機能です:nth-child(n) セレクターに追加して、親要素で指定された特定の型の子要素のみをカウントします。要素内の子要素が同じ型ではない場合、:nth-of-type(n) セレクターを使用して、親要素内の特定の型の子要素と一致させると便利です。

例: 偶数段落の背景色をオレンジに設定する

<!DOCTYPE html><html><head> <meta charset="utf-8"><title>属性选择器</title><style type="text/css">    .wrapper>p:nth-of-type(even){        background-color:orange;    }</style></head> <body><div class="wrapper">  <div>我是一个Div元素</div>  <p>我是一个段落元素</p>  <div>我是一个Div元素</div>  <p>我是一个段落</p>  <div>我是一个Div元素</div>  <p>我是一个段落</p>  <div>我是一个Div元素</div>  <p>我是一个段落</p>  <div>我是一个Div元素</div>  <p>我是一个段落</p>  <div>我是一个Div元素</div>  <p>我是一个段落</p>  <div>我是一个Div元素</div>  <p>我是一个段落</p>  <div>我是一个Div元素</div>  <p>我是一个段落</p></div></body></html>

ログイン後にコピー

13. [:nth-last-of-type(n)] セレクター

:nth-last-of-type(n) :nth-of-type(n) セレクターと同様に、親要素で指定された特定の子要素タイプを選択しますが、その開始方向は最後の子要素からになります。使用方法は nth-last-child と同じです。 (n )同じです。

例: コンテナ「div.wrapper」の最後から 3 番目の段落の背景をオレンジに設定します。

<!DOCTYPE html><html><head> <meta charset="utf-8"><title>选择器</title><style type="text/css">.wrapper > p:nth-last-of-type(3){  background: orange;}</style></head> <body><div class="wrapper">  <p>我是第一个段落</p>  <p>我是第二个段落</p>  <p>我是第三个段落</p>  <p>我是第四个段落</p>  <p>我是第五个段落</p>  <div>我是一个Div元素</div>  <p>我是第六个段落</p>  <p>我是第七个段落</p></div></body></html>

ログイン後にコピー

14. [:only-child] セレクター

:only-child は、一見すると要素を選択しており、その要素は親要素の唯一の子要素です。

例:

<!DOCTYPE html><html><head> <meta charset="utf-8"><title>选择器</title><style type="text/css">.post p {  background: green;  color: #fff;  padding: 10px;}.post p:only-child {  background: orange;}</style></head> <body><div class="post">  <p>我是一个段落</p>  <p>我是一个段落</p></div><div class="post">  <p>我是一个段落</p></div></body></html>

ログイン後にコピー

15. [:only-of-type] セレクター

:only-of-type セレクターは、:only-child の拡張であり、特定の種類の子要素を選択し、この子要素を選択します親要素の中でこのタイプの唯一のセレクターです。

例: コンテナ内の 1 つの div 要素のみの背景色をオレンジに変更します。

<!DOCTYPE html><html><head> <meta charset="utf-8"><title>选择器</title><style type="text/css">.wrapper > div:only-of-type {  background: orange;}</style></head> <body><div class="wrapper">  <p>我是一个段落</p>  <p>我是一个段落</p>  <p>我是一个段落</p>  <div>我是一个Div元素</div></div></body></html>

ログイン後にコピー

この記事の著者は、知識自体が変化しているため、著者は常に学び成長しており、記事の内容も随時更新されます。読者の誤解を避けるため、また出典を容易に追跡できるよう、転載する際には出典を明記してください。ご質問がございましたら、お気軽にご相談ください。