伪元素选择器

:before 和 :after

添加的位置
:before --- 第一个子节点
:after --- 最后一个子节点

特点
1、默认是 inline 元素
2、必须包含 content 属性
3、content 属性的值 ： 字符串或者CSS的函数（url(), attr(), counter()） 多个字符串使用 空格 连接

注意事项：
规范要求是用::， 实际开发使用: 为了支持IE低版本浏览器。

使用场景：
1、清除浮动
e:after{
content: "";
display: table;
clear: both;
}

2、页面中有重复显示的内容，且该内容无需进行DOM操作。（钱的符号等）
e:after{
content: "$";
}

3、防止父子块元素嵌套，导致的高度塌陷（外边距合并）。

e:before{
content: "";
display: block;
}

::selection -- 选中的文本内容，为其设置样式

注意：支持的CSS样式有限。

::first-letter --- 一行的首字母

::first-line ---- 首行

二、目标状态伪类

触发的条件：
点击链接元素，该链接元素href属性指向的元素（元素id == 锚链接的值）
e:target{

}

三、结构化伪类选择器

nth-child()

--- 不区分元素类型

nth-of-type()

--- 区分元素类型

参数：
number 数字 ---- 第几个位置上的元素
odd ---- 奇数位元素
even ---- 偶数位元素
an + b ---- n (0 ~ 无限大的正整数)

四、计数函数 counter(), counters(num, "分割符")

五、属性函数 attr(属性名)

六、多媒体选择器 @media

监控打印设备
@media print{

}

七、appearance 清除表单控件的默认样式

扩展： 浏览器厂商前缀

-webkit- Chrome, Safari
-moz- 火狐
-o- 欧朋
-ms- IE

使用浏览器厂商前缀的属性，
1.该属性处于试验阶段，浏览器支持不好。
2、该浏览器特有属性

八、属性选择器

e[属性名]
e[属性名=属性值]
e[属性名^=属性值]
e[属性名$=属性值]
e[属性名*=属性值]

e[属性名~=属性值]

e[属性名|=属性值]
1.只包含该属性值
2.或者改属性值以属性值-开头