CSS3 new feature-structure pseudo-class selector
-
A new structural pseudo-class selector is added to CSS3, which can use more concise code to achieve some of our needs.
-
Definition: The structure pseudo-class selector mainly selects elements based on the structure of the document, and is often used to select certain desired child elements based on the parent selector.
-
The main syntax is as follows:
| serial number | grammar | meaning |
|---|---|---|
| 1 | E:first-child | Match the first child element E in the parent element |
| 2 | E:last-child | Match the last E element in the parent element |
| 3 | E:nth-child(n) | Match the nth child element E in the parent element |
| 4 | E:first-of-type | Specify the first of type E |
| 5 | E:last-of-type | Specify the last of type E |
| 6 | E:nth-of-type(n) | The nth of the specified type E |
-
Among them: n can be numbers, keywords and formulas.
1. n如果是数字，就是选择第n个子元素，里面数字从1开始... 2. n如果是关键字: even代表偶数，odd代表奇数 3. n可以是公式︰常见的公式如下： 4. 注意：如果n是公式，则从0开始计算，但是第0个元素或者超出了元素的个数会被忽略
| official | Select range |
|---|---|
| n | All child elements |
| 2n | Even number element |
| 2n + 1 | Odd sub-elements |
| 5n | 5th, 10th, 15th... child elements |
| n+3 | From the 3rd child element (including the 3rd) to the end |
| -n+6 | The first 6 sub-elements (note that it cannot be written as 6-n, which is not valid) |
一、E:first-child
-
Meaning: Match the first child element E in the parent element.
-
Example: The following code will select the first li under ul.
<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> -
effect:
二、E:last-child
-
Meaning: Match the last E element in the parent element.
-
Example: The following code will select the last li under ul.
<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> -
effect:
三、E:nth-child(n)
-
Meaning: Match the nth child element E in the parent element.
-
Example 1: The following code will select all li under ul.
<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>
-
Example 2: The following code will select even-numbered sub-elements under 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>
-
Example 3: The following code will select odd-numbered sub-elements under 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>
-
Example 4: The following code will select the sub-elements 5, 10, 15... under ul.
<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>
-
Example 5: The following code will select the third child element under ul to the end.
<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>
-
Example 6: The following code will select the first 6 child elements under ul (note: it must not be written as 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:first-of-type
-
Meaning: Specify the first of type E.
-
Example: The following code will select the first li tag under the ul tag.
<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:last-of-type
-
Meaning: Specify the last of type E.
-
Example: The following code will select the first li tag under the ul tag.
<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)
-
Meaning: Specify the nth of type E.
-
Usage: The usage of nth-of-type(n) is similar to the usage of nth-child(n), except that nth-of-type(n) will select child elements under the condition of the specified type, where the value of n and The usage of n in nth-child(n) is exactly the same.
-
Example 1: The following code will select the second li tag under ul.
<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>
Note: The following is wrong! ! !
-
Want to select the first li element under ul:
ul li:first-child { background-color: green; } -
This way of writing will not select anything, because the first child element under the ul tag is p, not li, so no element will be selected. Logically speaking, it will first find the first child element under ul, and then compare it with li, and find that the tag type does not match, so it will not choose
ul li:first-of-type {
background-color: green;
}
- This way of writing will select the first li, logically: it will first find the li element under ul and then find the first element