css3新增选择器

前提：

    E——表示element元素

    data——表示属性

1. 属性选择器

    E[data] —— 选择带有data属性的元素对象

    E[data="one"] —— 选择带有data属性的元素对象且属性值为one

    E[data^="o"] —— 选择带有data属性的元素对象且属性以o开头

    E[data$="e"] —— 选择带有data属性的元素对象且属性以e结尾

    E[data*="n"] —— 选择带有data属性的元素对象且属性包含n

2. 伪类结构

    E:first-child —— 第一个孩子

    E:last-child —— 最后一个孩子

    E:only-child —— 只有一个孩子

    E:nth-child(n) —— 第n个孩子 (n=1,2,3...)

    E:nth-child(2n+1)或nth-child(odd) —— 奇数孩子

    E:nth-child(2n)或nth-child(even) —— 偶数孩子

    E:first-of-type —— 第一个孩子且限制是E元素

    E:last-of-type —— 最后一个孩子且限制是E元素

    E:nth-of-type(n) —— 第n个孩子且限制是E元素

    E:nth-last-of-type(n) —— 倒数第n个孩子且限制是E元素

    技巧：当 n<=0时，选择器选取无效，得到如下应用：

    选取前5个元素 E:nth-of-type(-n+5)

    选取后5个元素 E:nth-last-of-type(-n+5)

3. 兄弟选择器

    E+e —— E元素后面的第一个兄弟e元素

    E~e —— E元素后面的所有的兄弟e元素

4. 伪元素

 说明：伪类与伪元素的区别

    伪类： 用于在已有元素处于的某个状态时，为其添加对应的样式，这个状态是根据用户行为动态变化的

    伪元素： 用于创建一些不在文档树中的元素，并为其添加样式

    区别：伪类的操作对象是文档树中已有的元素，而伪元素创建了一个文档树外的元素，因此其本质区别在于有没有创建一个文档树之外的元素

E::first-letter —— 第一个文字

E::first-line —— 第一行文字

E::after {

    content: "***"

    ...

} —— 在盒子里面内容的后面插入内容（必须有content属性）

E::before {

    content: "***"

    ...

} —— 在盒子里面内容的前面插入内容（必须有content属性）

E::selection —— 设定选中内容样式

E::target —— 可以为锚点目标元素添加样式