问答
1. CSS选择器常见的有几种?
答：
- 基础选择器
#idid选择器，匹配特定id的元素
.classclass选择器，匹配包含class类名的元素
*通配符选择器，匹配了页面任何元素
element标签选择器，匹配页面元素标签
- 组合选择器
E,F分组选择器，可以设置E和F相同的样式
E F后代选择器，设置E元素后的所有F元素的样式
E>F子元素选择器，可以设置E元素后直接的F元素样式
E+F近邻元素选择器，可以设置E元素后近邻的F元素样式
E~F相邻元素选择器，可以设置E元素后同邻的F元素样式
- 属性选择器（大多数用于匹配表单的空间元素，可以不用反复添加样式来匹配）
E[attr=value]设置属性attr是value的元素样式
- 伪类选择器
E:hover改变E元素的悬停效果
- 伪元素选择器
E::before在E元素之前插入生成的元素
E::after在E元素之后插入生成的元素
2. 选择器的优先级是怎样的?
答：
优先级从高到低排列
- !import
- style属性
- id选择器
- class选择器
- 伪类选择器
- 属性选择器
- 标签选择器
- 通配符
- 浏览器自定义
注： 优先级相同的情况下，后面的样式优先于之前的设置。
3. class 和 id 的使用场景?
答：
-
class的类名用于同一类型并且拥有共同特性的模块，同一个元素可以拥有多个class类名 -
id拥有独一无二的样式，用于划分大区块
4. 使用CSS选择器时为什么要划定适当的命名空间？
答：
- 应用于展现网页整体的清晰结构，便于开发者阅读与重构
5. 以下选择器分别是什么意思?
答：
header{}
.header{}
.header .logo{}
.header.mobile{}
.header p, .header h3{}
header .nav>li{}
header a:hover{}
* ```#header``` 设置```id="header"``` 的元素样式
* ```.header``` 设置```class="header"``` 的元素样式
* ```.header .logo``` 设置```class="header"```元素下拥有```class="logo"``` 的元素样式
* ```.header.mobile``` 设置```class="header mobile"``` 的元素样式
* ```.header p, .header h3{}``` 同时设置```class="header"``` 下的```p``` 元素和```h3``` 元素样式
* ```#header .nav>li{}``` 设置```id="header"``` 下```class="nav"```的子元素```li``` 的元素样式（而非后代元素）
* ```#header a:hover``` 设置```id="header"``` 下```a``` 元素的鼠标悬停效果
### 6. 列出你知道的伪类选择器
#### 答：
* ```
E:hover // 鼠标悬停状态
E:active // 鼠标按下没有释放的状态
E:focus // 获得焦点的状态
E:empty // 匹配一个不包含任何子元素的元素
E:checked // 匹配表单中被默认选中的radio或checkbox元素
E:first-child // 匹配父元素中的第一个子元素E，如果没有找到，设置样式就无效。
E:first-of-type // 匹配父元素中相同类型元素E的第一个子元素
7. :first-child和:first-of-type的作用和区别
答：
-
:first-child是匹配父元素中的第一个子元素，如果没有找到，设置的样式就无效。
<style>
p:first-child{
color: blue;
}
h1:first-child{
color: blue;
}
span:first-child{
color: blue;
}
</style>
<div>
<!-- 这样设置的p元素的字体颜色显示蓝色，其他设置无效，因为h1和span不是父元素的第一个子元素-->
<p>我是第一个P元素</p>
<h1>我是第一个h1元素</h1>
<span>我是第一个span元素</span>
</div>
-
:first-of-type是匹配父元素中相同类型的第一个子元素，并不一定是父元素中的第一个子元素。
<style>
p:first-of-type{
color: blue;
}
h1:first-of-type{
color: blue;
}
span:first-of-type{
color: blue;
}
</style>
<div>
<!-- 这样设置的p,h1,span元素的字体颜色都显示蓝色-->
<p>我是第一个P元素</p>
<h1>我是第一个h1元素</h1>
<span>我是第一个span元素</span>
</div>
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会找到class="ct"的div元素下的第一个子元素，所以p标签下的aa的文字颜色为红色。 -
.item1:first-of-type会找到class="ct"的div元素下的同类型元素的第一个子元素，所以p和h3标签下的第一个子元素的背景色为蓝色，所以包含aa文本的p标签背景颜色为蓝色，包含bb文本的h3标签背景颜色为蓝色。
9.text-align: center的作用是什么，作用在什么元素上？能让什么元素水平居中
答：
- 作用于块级元素，语义上是让文本显示居中，实际运用中，可以让块级元素中的内联元素水平居中。
10. 如果遇到一个属性想知道兼容性，在哪查看?
答：
- 可以通过caniuse网站查询CSS属性兼容性
