CSS3新增（选择器{属性选择器，结构伪类选择器，伪元素选择器}）

1、属性选择器

属性选择器，可以根据元素特定的属性来选择元素，这样就不用借助 类 或者 id选择器。

E [ att ]   选择具有 att 属性的 E 元素   例如：input [ value ]

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 [ att *= ‘val‘ ]   选择具有 att 属性且属性值含有 val 的 E元素

注意：类选择器，属性选择器，伪类选择器 权重都是 10 

2、结构伪类选择器（一般用于选择父级里面的第几个孩子）

父元素  E:first-child    父元素中的第一个子元素 E

父元素  E:last-child    父元素中的最后一个子元素  E

父元素  E:nth-child( n )     父元素中的第 N 个子元素 E

注意：

　ul  :first-child{ color:pink; }  // 选择  ul 下的第一个子元素（ 第一个子元素可以使 div，p，span任何子元素）

　ul  li:first-child{ color: pink; }   //  选择  ul 下的第一个元素名是 li  的子元素 

nth-child( n ) 注意点：（n 可以是数字，关键字和公式）

数字：选择第 n 个子元素，里面数字从 1 开始

关键字： even 偶数，odd 奇数

　ul  li:nth-child( even )  //  选择 ul 中所有 偶数行的 li 子元素 

公式：常见公式如下（如果 n 是公式，则从 0 开始计算，但是第 0 个元素 或者超出了元素的个数会被忽略）

　ul  li:nth-child( n )   // 从 0 开始 每次加1 往后计算，相当于选择了所有的孩子    这里面必须是 n 不能是其他字母 

偶数：2n          奇数：2n+1          5的倍数：5n           从第5个开始（包含第5个）到最后：n+5          前5 个（包含第5 个）：-n + 5  

E:first-of-type：指定类型 E 的第一个

E:last-of-type：指定类型 E 的最后一个

E:nth-of-type( n )：指定类型 E 的第 n 个

区别：（两种相反的查找模式）

　1. nth-child 对父元素里面所有孩子排序选择（序号是固定的）先找到第 n 个孩子，然后看看是否和 E 匹配

　2. nth-of-type  对父元素里面指定子元素进行排序选择。先去匹配 E ，然后再根据 E 找第 n 个孩子

3. 伪元素选择器（重点）　　

伪元素选择器 可以帮助我们 利用 css 创建新标签元素，而不需要 HTML 标签，从而简化 HTML 结构

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

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

注意：

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

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

语法：element::before{ }

before 和 after 必须有 content 属性

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

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