一、CSS选择器常见的有几种?
常见的有
1、id选择器
见自己编写的如下代码：
html>Document 这是id选择器
这不是id选择器
2、class选择器
html>Document 这是class选择器
这不是class选择器
3、属性选择器
3.1 属性名加属性值型
html>Document
3.2纯属性名型
html>Document 这里是匿名者的图片   
4、分组选择器
用“,”隔开，表示该组元素属性都会作用
html>Document 这是h1标题
这也是h1标题
这是div里的h1
这是div里的p
5、派生选择器
html>Document 这是h1标题
这是div里的h1
这也是div里的h1标题
这是div里的p
6、伪类选择器
比如.hover、::selection、.action、:first-child、:last-child、:first-of-type、:last-of-type、:nth-of-type(n)、:nth-of-last-type(n)等
html>Document 这是伪类选择器
又例如：
html>Document 选中后字体变红色背景变蓝色
选中后不变色
7、伪元素选择器
:after、:before等
html>Document
- 我的前面需要增加“这是前置字”，我的后面需要增加“这是后置字”
- 我的前面需要增加“这是前置字”，我的后面需要增加“这是后置字”
- 我的前面需要增加“这是前置字”，我的后面需要增加“这是后置字”
- 我的前面需要增加“这是前置字”，我的后面需要增加“这是后置字”
8、组合选择器
比如E,F/E F（后代选择器）/E>F（子元素选择器）/E+F（直接相邻元素选择器----匹配之后的相邻同级元素）/E~F（普通相邻元素选择器----匹配之后的同级元素）
html>Document 这是外层DIV这是h1大标题
这是外层DIV里的div这是中层div的h1标题1
这是中层div里的段落
这是中层div的h1标题2
这是内层div这是内层div的h1标题
这也是h1大标题
这还是h1大标题
二、选择器的优先级是怎样的?
选择器优先级由高到低分别为：
!important > 作为style属性写在元素标签上的内联样式 >id选择器>类选择器>伪类选择器>属性选择器>标签选择器> 通配符选择器（* 应少用）>浏览器自定义；
当比较多个相同级别的CSS选择器优先级时，它们定义的位置将决定一切。下面从位置上将CSS优先级由高到低分为六级：
1、位于
标签里的中所定义的CSS拥有最高级的优先权。选择器注明的越具体，某些情况下则其优先级也越高；若重复写了则以最后的为准；
2、第二级的优先属性由位于 标签中的 @import 引入样式表所定义。
3、第三级的优先属性由标签所引入的样式表定义。
4、第四级的优先属性由标签所引入的样式表内的 @import 导入样式表定义。
5、第五级优先的样式有用户设定。
6、最低级的优先权由浏览器默认。
三、class 和 id 的使用场景?
class使用场景：需要某些特定样式的标签则放在同一个class中，需要此样式的标签可再添加此类。（class不可被javascript中的GetElementByID函数所调用）
id使用场景：1、根据提供的唯一id号快速获取标签对象，如：document.getElementById(id) ；2、用于充当label标签for属性的值：示例：，表示单击此label标签时，id为userid的标签获得焦点
四、使用CSS选择器时为什么要划定适当的命名空间？
划定适当的命名空间可：
1、提高代码的可读性；
2、便于维护管理；
3、保持代码的可拓展性；
五、以下选择器分别是什么意思?
详见注释：
#header{ } /* 这是id选择器header*/ .header{ }/*这是类选择器header*/ .header .logo{ }/*这是类选择器header后的类logo*/ .header.mobile{ }/* 满足类header及类mobile */ .header p, .header h3{ }/* 类选择器中的header 段落p 和类选择器中的标题h3 */ #header .nav>li{ }/*id选择器中的header后的类选择器nav的直接子元素li */ #header a:hover{ }/*id选择器header后的a标签hover伪类*/
六、列出你知道的伪类选择器
:hover /:active/ :link /:visited/::selection/:focus/:first-child/:nth-child(n)/:first-of-type/:nth-of-type(n)/:last-child/:nth-last-child(n)/:last-of-type/:nth-last-of-type(n)
七、:first-child和:first-of-type的作用和区别
E:first-child的作用 是选择E的父元素中的所有第一个子元素的E标签；
E:first-of-type的作用是 选择E的父元素中的第一个E类型的标签；
根据字面意思可以很好的理解这两者的区别：E:first-child首选是E的父元素中的第一个子元素，在这些子元素中选中E标签；E:first-of-type首选是E的父元素的第一个同类型的（E）标签；举个例子
html>Document 这是body里的第一个子元素
这是body里的第二个子元素
这是body里的第三个子元素
这是body中的div中里的第二个子元素
这是body中的div中里的第三个子元素
这是body里的第四个子元素
上述代码的运行结果为:“这是body里的第一个子元素”及“这是body中的div中里的第二个子元素”字均变为红色；若将
八、运行如下代码，解析下输出样式的原因。
aa
bb
ccc
运行结果为aa变红，aa、bb背景色均变为蓝色，ccc不做任何变化；
原因为：
.item1:first-child{ color: red; }
上述代码的作用是选择item1中的父元素中的第一个子元素并使其字体变为红色；当运行到 aa
.item1:first-of-type{ background: blue; }
上述代码的作用是选择item1中的父元素中的第一个同类型标签并使其背景色变为蓝色；当运行到 aabb
ccc
故：运行结果为aa变红，aa、bb背景色均变为蓝色，ccc不做任何变化；
九、 text-align: center的作用是什么，作用在什么元素上？能让什么元素水平居中？
作用是使得文本或者img标签等一些内联对象（或与之相似的元素）居中；其可作用在块级元素（比如p，h1等）中的内行元素对象上；如:
html>Document aa
bb
ccc
上述代码可将div中的p及h3中的文本和图片均进行居中了。
另margin:0 auto 是设置块级元素（或类似元素）的居中，注意与text-align:center的区别，可详见：http://www.cnblogs.com/zhwl/p/3529473.html
十、如果遇到一个属性想知道兼容性，在哪查看?
可在caniuse.com和w3school.com.cn等网站进行查询。
十一、补充：关于 :nth-child选择器
上述代码要实现.second同样效果的选择器，可采用以下方法：
1、
.parent :nth-child(2) { /* :nth-child(2)前有空格！ 意义是父元素中的第二个子元素*/ height: 200px; border-color: blue; }
2、
.children:nth-child(2) { /* :nth-child(2)前无空格！ 意义是属于其父元素中的第二个子元素.children*/ height: 200px; border-color: blue; }
3、
.parent .children:nth-child(2) { /* :nth-child(2)前无空格！ 意义是属于 .parent元素中的第二个子元素.children*/ height: 200px; border-color: blue; }
**本文版权归本人即简书笔名：该账户已被查封 所有，如需转载请注明出处。谢谢！ *
作者：该帐号已被查封
链接：https://www.jianshu.com/p/df3179ea043a
来自 “ ITPUB博客 ” ，链接：https://blog.itpub.net/964/viewspace-2813855/ ，如需转载，请注明出处，否则将追究法律责任。
