web前端练习31----Css，选择器（基本选择器，复合选择器，属性选择器，伪类，伪元素，优先级，雪碧图练习）

参考文档：https://man.ilovefishc.com/css3/

一、基本选择器：
1通配符选择器 *
2元素选择器 element
3类选择器 .class
4id选择器 #id
5内联样式 style

二、复合选择器：
1交集选择器  
  element.class || element#id
2并集选择器
  element1,element2,element3,...
3后代选择器
  element1 element2
4子元素选择器
  element1 > element2
5相邻兄弟选择器
  element1 + element2
6通用兄弟选择器
  element1 ~ element2

三、属性选择器：
属性选择器：可以根据元素中的属性或属性值选取元素，并指定样式
常用属性：
[attribute] 选择器用于选取带有指定属性的元素。
[attribute=value]选择器用于选择带有指定值属性的元素

四、伪类选择器
最常用的伪类选择器
1）:active 点击按下生效，不仅用于a元素，其他元素也生效。
https://man.ilovefishc.com/pageCSS3/dotActive.html
2）:hover  鼠标指针浮动在元素上面生效，不仅用于a元素，其他元素也生效。
https://man.ilovefishc.com/pageCSS3/dothover.html
3）:focus  输入框获取焦点以后生效。
https://man.ilovefishc.com/pageCSS3/dotfocus.html
4）:checked 单选框，多选框，select元素中的option 选中状态
https://man.ilovefishc.com/pageCSS3/dotChecked.html

五、子元素的伪类选择器
大排行：
:first-child 选择器用于选取属于其父元素的首个子元素的指定选择器。
https://man.ilovefishc.com/pageCSS3/dotfirst-child.html
:last-child 选择器用于选取属于其父元素的首个子元素的指定选择器。
https://man.ilovefishc.com/pageCSS3/dotlast-child.html
:nth-child(n) 选择器匹配属于其父元素的第 N 个子元素，不论元素的类型。(可以设置奇数，偶数)

https://man.ilovefishc.com/pageCSS3/dotnth-child-n.html

小排行：
:first-of-typ