CSS3新特性-结构伪类选择器
-
在CSS3中新增了一个结构伪类选择器，它能用更加简洁的代码，实现我们的某些需求。
-
定义：结构伪类选择器主要根据的是文档的结构来选择元素，常常用在根据父级选择器选出某些想要的子元素。
-
主要语法如下：
| 编号 | 语法 | 含义 |
|---|---|---|
| 1 | E:first-child | 匹配父元素中的第一个子元素E |
| 2 | E:last-child | 匹配父元素中最后一个E元素 |
| 3 | E:nth-child(n) | 匹配父元素中的第n个子元素E |
| 4 | E:first-of-type | 指定类型E的第一个 |
| 5 | E:last-of-type | 指定类型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:first-child
-
含义：匹配父元素中的第一个子元素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:last-child
-
含义：匹配父元素中最后一个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:nth-child(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:first-of-type
-
含义：指定类型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:last-of-type
-
含义：指定类型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标签下的第一个子元素是p,不是li,所以不会有元素被选出来。逻辑来说的话就是：它会先找到ul下的第一个子元素，然后去和li比较，发现标签类型不符合，所以就不会选择
ul li:first-of-type {
background-color: green;
}
- 这种写法会将第一个li选出来，从逻辑上来说：它会先找到ul下面的li元素然后再去找第一个元素