CSS选择器
css选择器种类
基本选择器：
- 通配符选择器 *
- id选择器 #id
- 类选择器 .className
- 元素选择器 E
- 元素后代选择器 E F
- 子元素选择器 E > F
- 相邻兄弟元素选择器 E + F
- 群组选择器 A，B，C
属性选择器：
- E[attr] :只使用属性名，没有确定任何属性值
- E[attr="value"]:指定属性名和属性值
- button[type="input"]
伪类选择器：
- 动态伪类：
- hover
- active 用户点击元素瞬间的效果
- focus
- UI状态伪类：Form元素操作
- CSS3 nth选择器：
- first-child
- last-child
- nth-child(odd/even/2n+1...)
选择器的优先级别：!importantid > id > class = 伪类选择器 = 属性选择器 > 元素选择器 = 伪元素选择器 > 通配选择器
伪类和伪元素：
- 伪类：伪类用于向某些选择器添加特殊的效果。 （通过添加一个类就可以达到效果）
- 伪元素：伪元素用于将特殊的效果添加到某些选择器。（通过添加一个元素才能达到效果）
- 伪类伪元素的单双引号：::before 和 :after中双冒号和单冒号 有什么区别？解释一下这2个伪元素的作用。单冒号(:)用于CSS3伪类，双冒号(::)用于CSS3伪元素。（伪元素由双冒号和伪元素名称组成）双冒号是在当前规范中引入的，用于区分伪类和伪元素。不过浏览器需要同时支持旧的已经存在的伪元素写法，比如:first-line、:first-letter、:before、:after等，而新的在CSS3中引入的伪元素则不允许再支持旧的单冒号的写法。想让插入的内容出现在其它内容前，使用::before，否者，使用::after；在代码顺序上，::after生成的内容也比::before生成的内容靠后。如果按堆栈视角，::after生成的内容会在::before生成的内容之上
@import和link引入的区别
区别：
- 类别：@import属于CSS提供的语法规则，用于提供样式表；link是HTML提供的标签，不仅可以加载样式还可以定义rel连接属性等
- 加载顺序：@import引入的样式在页面加载完毕以后再被加载；link标签引入的CSS被同时加载
- 兼容性：@import是css2提供的语法，IE5+可以兼容
- DOM可控性区别：@import属于css级别，无法用JS操作；link可以通过JS动态的操作
覆盖顺序：
同样优先级的样式，在样式表中出现顺序早的被覆盖。
href和src的区别：
- href标识超文本链接，指明了网络资源的位置，用在link和a上。建立当前文档和外部资源的联系
- src表示引用资源，将外部资源替换当前元素用在img，script，iframe上。当解析时页面下载和解析会暂停，直到浏览器接受、编译执行完。