本教程版权归小圆和饥人谷所有，转载须说明来源

问答

1. CSS选择器常见的有几种?

基础选择器
关系选择器
属性选择器
伪类选择器
伪对象选择器
通配符选择器

2. 选择器的优先级是怎样的?

!important > 标签内样式 > id选择器 > 类选择器 > 伪类选择器 > 属性选择器 > 标签选择器 > 通配符选择器 > 浏览器默认样式

3. class 和 id 的使用场景?

class 用于主区块里面的详细内容，同一个class可以重复出现，一个标签可以有几个不同的class。
id多使用于主要块级元素，id一个页面中只能出现一次，有些独一无二的元素也可使用id。

4. 使用CSS选择器时为什么要划定适当的命名空间？

提高代码可读性，加强语义化，便于编写和调试代码
有利于浏览器解析和渲染页面
团队协作时避免和他人命名产生冲突，便于维护

5. 以下选择器分别是什么意思?

#header{
}
//选择id名为header的元素
.header{
}
//选择class名为header的元素
.header .logo{
}
//选择class名为header的元素下的class名为logo的元素
.header.mobile{
}
//选择class名同时为header和mobile的元素
.header p, .header h3{
}
//选择class名为header的元素下的p和class名为header的元素下的h3
#header .nav>li{
}
//选择id名为header的元素下的class名为nav的直接子元素li
#header a:hover{
}
//选择id名为header的元素下的a在鼠标划过时的样式

6. 列出你知道的伪类选择器

E:link 设置超链接a在未被访问前的样式（特指a标签）
E:visited 设置超链接a其链接地址已被访问过的样式（特指a标签）
E:hover 设置鼠标悬停在元素上的样式（不限于a标签）
E:active 设置元素在鼠标按下时的样式（不限于a标签）
E:not(s) 匹配不含有s选择器的元素E
E:first-child 父元素的第一个子元素
E:last-child 父元素的最后一个子元素 E
E:only-child E元素是唯一的子元素时被匹配
E:nth-child(n) 匹配父元素的第n个子元素E，假设该子元素不是E，则选择符无效。
E:nth-last-child(n) 匹配父元素的倒数第n个子元素E，假设该子元素不是E，则选择符无效。
E:first-of-type 匹配同类型中的第一个同级兄弟元素E。
E:last-of-type 匹配同类型中的最后一个同级兄弟元素E。
E:only-of-type 匹配同类型中的唯一的一个同级兄弟元素E。
E:nth-of-type(n) 匹配同类型中的第n个同级兄弟元素E。
E:nth-last-of-type(n) 匹配同类型中的倒数第n个同级兄弟元素E。
E:empty 匹配没有任何子元素（并且不包括空格、回车）的元素E
E:checked 匹配用户界面上处于选中状态的元素 E。(用于 input type 为 radio 与 checkbox 时)
E:enabled 匹配用户界面上处于可用状态的元素E。
E:disabled 匹配用户界面上处于禁用状态的元素E。
E:target 匹配相关URL指向的E元素。
E:root 匹配E元素在文档的根元素。在HTML中，根元素永远是HTML。

7. `:first-child`和`:first-of-type`的作用和区别

:first-child 匹配的是某父元素的第一个子元素，可以说是结构上的第一个子元素。
:first-of-type 匹配的是某父元素下相同类型子元素中的第一个。这里不再限制是第一个子元素了，只要是该类型元素的第一个就行了。

8. 运行如下代码，解析下输出样式的原因。

<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>

.item1:first-child 当div中的第一个子元素的class="item1"时，样式有效，所以内容 aa 为红色。.item1:first-of-type 选择的是不同标签的第一个class="item1"的元素，并且标签p和h3都有class="item1"的元素，所以内容aa和bb的背景为蓝色。

9. `text-align: center`的作用是什么，作用在什么元素上？能让什么元素水平居中

文字居中或者让inline-block居中，一般作用在块级元素上或者inline-block上，能让块级元素里的文字和inline-block元素居中，能让inline-block里的文字居中。

10. 如果遇到一个属性想知道兼容性，在哪查看?

可以在Can I Use网站查看

CSS选择器

问答