CSS选择器常见的有几种?
id选择器 #name{}
class类选择器 .name{}
属性选择器 input[属性名称="？"]
分组选择器 用，分隔开
派生选择器 （空格）（所有）后代选择器
直接子元素选择器 p>a{}直接的孩子
相邻元素选择器 E+F 与E相邻的元素F
普通相邻选择器 E~F 与E相邻的元素F，以及F同级的其他F元素
通配符选择器 *｛｝
后代选择器，相邻选择器
css3选择器
first-of-type
last-of-type
ie8后兼容
选择器的优先级是怎样的?
- 在属性后面使用 !important
- 会覆盖页面内任何位置定义的元素样式
- 作为style属性写在元素标签上的内联样式
- id选择器
- 类选择器
- 伪类选择器
- 属性选择器
- 标签选择器
- 通配符选择器
- 浏览器自定义
优先级的计算规则:标签选择器为1，类选择器为10，ID选择器为100，例如.nav h1优先级10+1，并且1+1+1+...+1不大于10
class 和 id 的使用场景?
class具有普遍性，同一个页面中可被多次引用，id具有唯一性，划分大区块，通常用于页面布局，当使用id和class同时修改一个属性时，id的权重高于class。
以下选择器分别是什么意思?
#header{}/*id为header的标签*/
.header{}/*class为header的标签*/
.header .logo{}/*class为header的标签后代中class为logo的标签*/
.header.mobile{}/*同时具有header与mobile的标签*/
.header p, .header h3{｝/*class为header的标签后代中的p标签以及h3标签*/
#header .nav>li{}/*id为header的标签后代class为nav的标签的直接孩子的li标签*/
#header a:hover{}/*id为header的标签后代的a标签的hover伪类*/
列出你知道的伪类选择器
E:first-child 匹配元素E的第一个子元素
E:link 匹配所有未被点击的链接
E:visited 匹配所有已被点击的链接
E:active 匹配鼠标已经其上按下、还没有释放的E元素
E:hover 匹配鼠标悬停其上的E元素
E:focus 匹配获得当前焦点的E元素
E:lang(c) 匹配lang属性等于c的E元素
E:enabled 匹配表单中可用的元素
E:disabled 匹配表单中禁用的元素
E:checked 匹配表单中被选中的radio或checkbox元素
E::selection 匹配用户当前选中的元素
E:root 匹配文档的根元素，对于HTML文档，就是HTML元素
*E:nth-child(n) 匹配其父元素的第n个子元素，第一个编号为1*
*E:nth-last-child(n) 匹配其父元素的倒数第n个子元素，第一个编号为1*
*E:nth-of-type(n) 与:nth-child()作用类似，但是仅匹配使用同种标签的元素*
*E:nth-last-of-type(n) 与:nth-last-child() 作用类似，但是仅匹配使用同种标签的元素*
E:last-child 匹配父元素的最后一个子元素，等同于:nth-last-child(1)
E:first-of-type 匹配父元素下使用同种标签的第一个子元素，等同于:nth-of-type(1)
E:last-of-type 匹配父元素下使用同种标签的最后一个子元素，等同于:nth-last-of-type(1)
E:only-child 匹配父元素下仅有的一个子元素，等同于:first-child:last-child或 :nth-child(1):nth-last-child(1)
E:only-of-type 匹配父元素下使用同种标签的唯一一个子元素，等同于:first-of-type:last-of-type或 :nth-of-type(1):nth-last-of-type(1)
E:empty 匹配一个不包含任何子元素的元素，文本节点也被看作子元素
E:not(selector) 匹配不符合当前选择器的任何元素
:first-child和:first-of-type的作用和区别
.box p first-child：父元素的第一个孩子是p的生效（先找父亲的第一个孩子看是否是女孩）
.box p first-of-type：父元素下定位p 同级、同类型第一个生效（找到父亲，看自己是否是同类型标签的第一个）
运行如下代码，解析下输出样式的原因。
a.png
text-align: center的作用是什么，作用在什么元素上？能让什么元素水平居中
作用是让元素水平居中，作用在块级元素上，让块级元素中的行内元素水平居中
如果遇到一个属性想知道兼容性，在哪查看?
caniuse
声明：本博客版权归作者和饥人谷所有，转载需说明来源！
