1.css选择器有常见的哪几种
基本选择器
1.id选择器
给设置了id的元素设定样式，在css中以#idname标注。id选择器名在一个html里面只能用一次，不能重复。
id选择器也能在其他标签后使用。
2.类选择器
给设置了class的元素设定样式，在css中以.classname标注。
class选择器也能在其他标签后使用。
一个class也可以被赋予多个类名，用于类合并，只设置一个class，所有设置同一class类名的html元素都会使用这一个class的样式。多个类名用空格分开。
3.属性选择器
给有指定属性的html元素设定样式
4.元素选择器
为html标签设置样式，例如
5.通配选择器
就是通配选择器，一个就是一个通配选择器，由于通配选择器对页面内容都能起到作用，所以不多使用。
组合选择器
1.相邻兄弟选择器
相邻兄弟就是选择该元素紧接后面的一个元素的选择器，有共同的父元素，可以使用相邻兄弟选择器。
2.普通兄弟选择器
在连接两个元素时，他会在自己之后的同级内选择另外一个元素，但是得是跟在后面，中间不能有其他元素间隔。
3.子选择器
4.后代选择器
子选择器和后代选择器的区别：子选择器是选择同级的所有被选择元素，后代选择器是选择之后的所有被选择元素，无论嵌套了多少层。
子选择器用>连接，后代选择器用空格连接。
选择器的优先级是怎样的
在属性后面使用 !important,会覆盖页面内任何位置定义的元素样式。
作为style属性写在元素标签上的内联样式。
id选择器
类选择器
伪类选择器
属性选择器
标签选择器
通配符选择器
浏览器自定义
总的来说，定位的越精准，优先级就越高。优先级高的样式会覆盖优先级低的
class和id的使用场景
class是类选择器，在HTML中可以多次使用，并且可以多次重复使用同一类名，在一个class中也可以为一个class添加多个类名，任何元素都可以使用class，在使用了id的元素内一样可以使用class。不过同时设置id和class的话，id的权重要高于class。css样式里面class前缀加“.”。
id是ID选择器，页面中可以有多个ID选择器，但是id选择器名必须是唯一的，一般用于布局（比如 header，content，footer.....），一些独一无二的元素也可以使用。css样式里面id前缀加“#”。
使用CSS选择器时为什么要划定适当的命名空间？
如果不划定适当的命名空间，就不能精确的定位到每一个元素，而且更利于阅读和后期维护
以下选择器分别是什么意思?
#header{
}
.header{
}
.header .logo{
}
.header.mobile{
}
.header p, .header h3{
}
#header .nav>li{
}
#header a:hover{
}
header是id选择器，为idname为header的id选择器设置样式
.header是类选择器，为类名为header的class选择器设置样式
.header .logo是类选择器，为.header内的.logo设置样式
.header.mobile是类选择器，为类名中同时有.header和.mobile的元素设置样式
.header p,.header h3为.header内的p和h3标签同时设置样式
header .nav>li子元素选择器，为idheader选择器内的class选择器下的子元素li设置样式
header a:hover后代选择器，伪类选择器 给id选择器header内的a链接设置鼠标悬停时的样式
列出你知道的伪类选择器
:hover
:link
:active
:fist-child
:first-of-type
:nth-of-child()
:nth-of-type()
:last-child
:last-of-type
:focus
:first-child和:first-of-type的作用和区别
:first-child：为某个父元素的首个子元素，如果首个子元素与要求的元素不一致，就不会执行。
：first-of-type：为某个父元素下的各种元素的第一个，标注标签寻找，即使嵌套也可以找到。
要有父元素，不然不能执行
运行如下代码，解析下输出样式的原因。
<style>
.item1:first-child{
color: red;
}
.item1:first-of-type{
background: blue;
}
</style>
<div class="ct">
<p class="item1">aa</p>
<h3 class="item1">bb</h3>
<h3 class="item1">ccc</h3>
</div>
用first-child来寻找.item1，满足条件是.ct的子元素，名为.item1的首个子元素，就是内容为aa的第一个p标签，所以aa变成红色，因为h3标签不是ct的首个子元素所以没有变色。
用first-of-type来寻找.item1，即各类标签的第一个，满足条件的有内容为aa的p标签和内容为bb的第一个h3标签，所以aa和bb有一个蓝色的背景，因为内容为cc的h3标签不是.ct的首个h3标签，所以没有蓝色背景。
text-align: center的作用是什么，作用在什么元素上？能让什么元素水平居中
对块级元素内的内容是生效
如果遇到一个属性想知道兼容性，在哪查看?
可以在Can I use查看，[Can I use]
参考MDN和W3s
****本文章版权属 饥人谷_张世钧和饥人谷 所有，如需转载请务必注明出处。****
