-
伪元素选择器
-
- 示例
-
结语
=================================================================
CSS3给我们新增了选择器，可以更加便捷，更加自由的选择目标元素，你还不知道吗？
属性选择器可以根据元素特定属性的来选择元素。这样就可以不用借助于类或者 id 选择器。
| 选择符 | 简介 |
| — | — |
| E[att ] | 选择具有 att 属性的 E 元素 |
| E[att =" val"] | 选择具有 att 属性且属性値等于 val 的 E 元素 |
| E[ att^=“val”] | 匹配具有 att 属性且值以 val 开头的 E 元素 |
| E[ att$=“val”] | 匹配具有 att 属性且值以 val 结尾的 E 元素 |
| E[ att*=“val”] | 匹配具有 att 属性且值中含有 val 的 E 元素 |
示例
结构伪类选择器主要根据文档结构来选择元素，常用于选取父级选择器里面的了元素
| 选择符 | 简介 |
| — | — |
| E : first - child | 匹配父元素中的第一个子元素E |
| E : last - child | 匹配父元素中最后一个 E 元素 |
| E : nth - child ( n ) | 匹配父元素中的第个子元素 E |
| E : first - of - type | 指定类型 E 的第一个 |
| E : last - of - type | 指定类型 E 的最后一个 |
| E : nth - of - type ( n ) | 指定类型 E 的第 n 个 |
区别：
-
nth - child 对父元素里面所有孩子排序选择（序号是固定的）先找到第 n 个孩子，然后看是否和 E 匹配。
-
nth - of - type 对父元素里面指定子元素进行排序选择。先去匹配 E ，然后再根据E找第 n 个孩子。
注： nth - child ( n ）选择某个父元素的一个或多个特定的子元素。
-
n 可以是数字，关键字和公式。
-
n 如果是数字，就是选择第 n 个子元素，里面数字从1开始…。
-
n 可以是关键字： even 偶数， odd 奇数。
-
n 可以是公式；常见的公式如下（如果 n 是公式，则从0开始计算，但是第0个元素或者超出了元素的个数会被忽略）
| 公式 | 取值 |
| — | — |
| n | 1 2 3 … |
| 2n | 偶数 |
| 2n+1 | 奇数 |
| 5n | 5 10 15… |
| n+5 | 从第5个开始（包含第五个）到最后 |
| -n+5 | 前5个（包含第5个)… |
| … | … |
示例
- 我是第1个孩子
- 我是第2个孩子
- 我是第3个孩子
- 我是第4个孩子
- 我是第5个孩子
- 我是第6个孩子
- 我是第7个孩子
- 我是第8个孩子
- 我是第1个孩子
- 我是第2个孩子
- 我是第3个孩子
- 我是第4个孩子
- 我是第5个孩子
- 我是第6个孩子
- 我是第7个孩子
- 我是第8个孩子
Document
