CSS选择器，优先级的总结

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上。当解析时页面下载和解析会暂停，直到浏览器接受、编译执行完。