css3新增了选择器，还有人不知道吗？

结构伪类选择器

---

结构伪类选择器主要根据文档结构来选择元素，常用于选取父级选择器里面的了元素

| 选择符 | 简介 |

| — | — |

| 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个孩子

• 

  你

  我
  他

  

  伪元素选择器

  ---

  伪元素选择器可以帮助我们利用 CSS 创建新标签元素，而不需要 HTML 标签，从而简化 HTML 结构。(之前清除浮动那一节用到了伪元素）

  | 选择符 | 简介 |

  | — | — |

  | ::before | 在元素内部的前面插入内容 |

  | :: after | 在元素内部的后面插入内容 |

  注意：

  • before 和 after 创建一个元素，但是属于行内元素。

  • 新创建的这个元素在文档树中是找不到的，所以我们称为伪元素。

  • 语法： element :: before {}

  • before 和 after 必须有 content 属性。

  • before 在父元素内容的前面创建元素，after 在父元素内容的后面插入元素。

  • 伪元素选择器和标签选择器一样，权重为1 。

  示例

  ### 结尾

  学习html5、css、javascript这些基础知识，学习的渠道很多，就不多说了，例如，一些其他的优秀博客。但是本人觉得看书也很必要，可以节省很多时间，常见的javascript的书，例如：javascript的高级程序设计，是每位前端工程师必不可少的一本书，边看边用，了解js的一些基本知识，基本上很全面了，如果有时间可以读一些，js性能相关的书籍，以及设计者模式，在实践中都会用的到。

  高级程序设计，是每位前端工程师必不可少的一本书，边看边用，了解js的一些基本知识，基本上很全面了，如果有时间可以读一些，js性能相关的书籍，以及设计者模式，在实践中都会用的到。