伪元素选择器
: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.或者改属性值以属性值-开头