CSS3の新しい素性構造の擬似クラスセレクター
-
新しい構造擬似クラスセレクターがCSS3に追加されました。これにより、より簡潔なコードを使用して、いくつかのニーズを実現できます。
-
定義：構造擬似クラスセレクターは、主にドキュメントの構造に基づいて要素を選択し、親セレクターに基づいて特定の目的の子要素を選択するためによく使用されます。
-
主な構文は次のとおりです。
| シリアルナンバー | 文法 | 意味 |
|---|---|---|
| 1 | E：最初の子 | 親要素の最初の子要素Eに一致します |
| 2 | E：最後の子 | 親要素の最後のE要素と一致します |
| 3 | E：n番目の子（n） | 親要素のn番目の子要素Eに一致します |
| 4 | E：最初のタイプ | タイプEの最初のものを指定します |
| 5 | E：最後のタイプ | タイプEの最後のものを指定します |
| 6 | E：nth-of-type（n） | 指定されたタイプEのn番目 |
-
それらの中で：nは数字、キーワード、数式にすることができます。
1. n如果是数字，就是选择第n个子元素，里面数字从1开始... 2. n如果是关键字: even代表偶数，odd代表奇数 3. n可以是公式︰常见的公式如下： 4. 注意：如果n是公式，则从0开始计算，但是第0个元素或者超出了元素的个数会被忽略
| 公式 | 範囲を選択 |
|---|---|
| n | すべての子要素 |
| 2n | 偶数子元素 |
| 2n + 1 | 奇数のサブ要素 |
| 5n | 5、10、15 ...子要素 |
| n + 3 | 3番目の子要素（3番目を含む）から最後まで |
| -n + 6 | 最初の6つのサブ要素（6-nとして記述できないことに注意してください。これは有効になりません） |
一、E：最初の子
-
意味：親要素の最初の子要素Eに一致します。
-
例：次のコードは、ulの下の最初のliを選択します。
<style> ul li:first-child { background-color: green; } </style> <ul> <li>我是第1个li</li> <li>我是第2个li</li> <li>我是第3个li</li> <li>我是第4个li</li> <li>我是第5个li</li> </ul> -
効果：
二、E：最後の子
-
意味：親要素の最後のE要素に一致します。
-
例：次のコードは、ulの下の最後のliを選択します。
<style> ul li:last-child { background-color: green; } </style> <ul> <li>我是第1个li</li> <li>我是第2个li</li> <li>我是第3个li</li> <li>我是第4个li</li> <li>我是第5个li</li> </ul> -
効果：
三、E：n番目の子（n）
-
意味：親要素のn番目の子要素Eに一致します。
-
例1：次のコードは、ulの下のすべてのliを選択します。
<style> ul li:nth-child(n) { background-color: green; } </style> <ul> <li>我是第1个li</li> <li>我是第2个li</li> <li>我是第3个li</li> <li>我是第4个li</li> <li>我是第5个li</li> </ul>
-
例2：次のコードは、ulの下の偶数のサブ要素を選択します。
<style> ul li:nth-child(2n) { background-color: green; } </style> <ul> <li>我是第1个li</li> <li>我是第2个li</li> <li>我是第3个li</li> <li>我是第4个li</li> <li>我是第5个li</li> </ul>
-
例3：次のコードは、ulの下の奇数のサブ要素を選択します。
<style> ul li:nth-child(2n+1) { background-color: green; } </style> <ul> <li>我是第1个li</li> <li>我是第2个li</li> <li>我是第3个li</li> <li>我是第4个li</li> <li>我是第5个li</li> </ul>
-
例4：次のコードは、ulの下のサブ要素5、10、15 ...を選択します。
<style> ul li:nth-child(5n) { background-color: green; } </style> <ul> <li>我是第1个li</li> <li>我是第2个li</li> <li>我是第3个li</li> <li>我是第4个li</li> <li>我是第5个li</li> <li>我是第6个li</li> <li>我是第7个li</li> <li>我是第8个li</li> <li>我是第9个li</li> <li>我是第10个li</li> <li>我是第11个li</li> <li>我是第12个li</li> <li>我是第13个li</li> <li>我是第14个li</li> <li>我是第15个li</li> <li>我是第16个li</li> <li>我是第17个li</li> <li>我是第18个li</li> <li>我是第19个li</li> <li>我是第20个li</li> </ul>
-
例5：次のコードは、ulの下の3番目の子要素を最後まで選択します。
<style> ul li:nth-child(n+3) { background-color: green; } </style> <ul> <li>我是第1个li</li> <li>我是第2个li</li> <li>我是第3个li</li> <li>我是第4个li</li> <li>我是第5个li</li> <li>我是第6个li</li> <li>我是第7个li</li> <li>我是第8个li</li> <li>我是第9个li</li> <li>我是第10个li</li> </ul>
-
例6：次のコードは、ulの下の最初の6つの子要素を選択します（注：n-6として記述してはなりません）。
<style> ul li:nth-child(-n+6) { background-color: green; } </style> <ul> <li>我是第1个li</li> <li>我是第2个li</li> <li>我是第3个li</li> <li>我是第4个li</li> <li>我是第5个li</li> <li>我是第6个li</li> <li>我是第7个li</li> <li>我是第8个li</li> <li>我是第9个li</li> <li>我是第10个li</li> </ul>
四、E：最初のタイプ
-
意味：タイプEの最初のものを指定します。
-
例：次のコードは、ulタグの下の最初のliタグを選択します。
<style> ul li:first-of-type { background-color: green; } </style> <ul> <p>我是第1个p标签</p> <p>我是第2个p标签</p> <a href="#">我是第1个a标签</a> <a href="#">我是第2个a标签</a> <li>我是第1个li</li> <li>我是第2个li</li> <li>我是第3个li</li> <li>我是第4个li</li> <li>我是第5个li</li> </ul>
五、E：最後のタイプ
-
意味：タイプEの最後のものを指定してください。
-
例：次のコードは、ulタグの下の最初のliタグを選択します。
<style> ul a:last-of-type { background-color: green; } </style> <ul> <p>我是第1个p标签</p> <p>我是第2个p标签</p> <a href="#">我是第1个a标签</a> <a href="#">我是第2个a标签</a> <li>我是第1个li</li> <li>我是第2个li</li> <li>我是第3个li</li> <li>我是第4个li</li> <li>我是第5个li</li> </ul>
六、E：nth-of-type（n）
-
意味：タイプEのn番目を指定します。
-
使用法：nth-of-type（n）の使用法は、nth-child（n）の使用法と似ていますが、nth-of-type（n）が指定されたタイプの条件下で子要素を選択する点が異なります。 nの値とnth-child（n）でのnの使用法はまったく同じです。
-
例1：次のコードは、ulの下の2番目のliタグを選択します。
<style> ul li:nth-of-type(2) { background-color: green; } </style> <ul> <p>我是第1个p标签</p> <p>我是第2个p标签</p> <a href="#">我是第1个a标签</a> <a href="">我是第2个a标签</a> <li>我是第1个li</li> <li>我是第2个li</li> <li>我是第3个li</li> <li>我是第4个li</li> <li>我是第5个li</li> </ul>
注：以下は間違っています！！！
-
ulの下の最初のli要素を選択したい：
ul li:first-child { background-color: green; } -
ulタグの下の最初の子要素はliではなくpであるため、この記述方法では何も選択されません。したがって、要素は選択されません。論理的に言えば、最初にulの下の最初の子要素を見つけ、次にそれをliと比較して、タグタイプが一致しないことを見つけるので、選択しません。
ul li:first-of-type {
background-color: green;
}
- この記述方法では、論理的に最初のliが選択されます。最初にulの下のli要素が検索され、次に最初の要素が検索されます。