一，CSS选择器常见的有几种?
答：
- 基础选择器
- 组合选择器
- 属性选择器
- 伪类选择器
- 伪元素选择器
基础选择器
* { margin:0; padding:0;}
<!--常用于重置样式-->
p { font-size:2em;}
<!--元素选择器-->
.info { background:#ff0;}
<!--class类选择器-->
p.info { background:#ff0;}
<!--class类选择器-->
p.info.error { color:#900; font-weight:bold;}
<!--class选择器-->
p#info { background:#ff0;}
<!--ID选择器-->
组合选择器
div,p { color:#f00;}
<!--并列选择器-->
#nav,li { display:inline;}
<!--后代选择器-->
div>strong { color:#f00;}
<!--后代选择器-->
p+p { color:#f00;}
<!--兄弟选择器-->
p~ul { color:#f00;}
<!--兄弟选择器-->
1、并列选择器（E,F,G,...）
这类选择器之间用逗号作分割，能匹配选择器列出的所有标签元素。
2、后代选择器（E F; E>F）
E F,标签之间用空格隔开，表示匹配E标签内所有F标签，所匹配的F标签不仅仅是E标签的儿子，还有可能是E标签的孙子，或者曾孙、从孙等等。
E>F标签匹配所有为E标签儿子的F标签。
3、兄弟选择器（E+F；E~F）
E~F选择其中F标签无需紧紧跟随E标签后面第一个，如果需要实现这样的一个功能可以用E+F选择器。对于IE浏览器来说只有IE6以上的版本才支持该选择器。
其他详细信息见精华资料
二，选择器的优先级是怎样的?
答：
层叠优先级是:
浏览器缺省 < 外部样式表 < 内部样式表 < 内联样式
其中样式表又有:
类选择器 < 类派生选择器 < ID选择器 < ID派生选择器
所以完整的层叠优先级是:
浏览器缺省 < 外部样式表 < 外部样式表类选择器 < 外部样式表类派生选择器 < 外部样式表ID选择器 < 外部样式表ID派生选择器 < 内部样式表 < 内部样式表类选择器 < 内部样式表类派生选择器 < 内部样式表ID选择器 < 内部样式表ID派生选择器 < 内联样式<!important...共13个优先级
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
div { color: #00FF00 } /* 绿色 /
.a1 { color: #0000FF } / 蓝色 /
.a1 div { color: #00FFFF } / 青色 /
.a2 { color: #FF0000 } / 红色 /
#a2 { color: #FFFF00 } / 黄色 /
#a2 div { color: #FF00FF } / 紫色 */
</style>
</head>
<body>
<div>我是绿色，内部样式表优先于浏览器缺省</div>
<div class="a2">我是红色，类选择器优先于内部样式表</div>
<div class="a2" id="a2">我是黄色，ID选择器优先于类选择器</div>
<div class="a1">
<span>我是蓝色，类选择器优先于内部样式表</span>
<div>我是青色，类派生选择器优先于类选择器</div>
<div class="a2">我还是青色，类派生选择器优先于所有类选择器</div>
<div id="a2">
<span>我是黄色，ID选择器优先于类派生选择器</span>
<div>我是紫色，ID派生选择器优先于类派生选择器</div>
<div class="a1">我还是紫色，ID派生选择器优先于所有类选择器</div>
<div class="a1" id="a1">我还是紫色，ID派生选择器优先于所有ID选择器</div>
<div class="a1" id="a1" style="color:#000000;">我是黑色，内联样式驾到闲杂人等退下</div>
</div>
</div>
</body>
</html> ````
一个元素同时应用多个class，后定义的优先（就近原则），加上!important者最优先！
选择器权重计算：
针对一个css选择器表达式，遇到一个id就往权重值中加100，遇到一个class就往权重值中加10，遇到一个标签就往权重值中加1。
div p#large ul.list的权重值113。
div p#large ul.list li的权重值114。
从上面我们可以得出两个关键的因素：
权值的大小跟选择器的类型和数量有关，
样式的优先级跟样式的定义顺序有关。
规则：
选择器的权值加到一起，大的优先；如果权值相同，后定义的优先
三，class 和 id 的使用场景?
答：唯一 确定只用一次，就用id。重复多次使用就用class。尽量使用class。
四，使用CSS选择器时为什么要划定适当的命名空间？
答：
- 保持可维护性
- 多人合作时避免和他人命名产生冲突
- 可以使代码具有可读性，更有语义化并且便于写代码和调试代码
- 避免因为命名不规范而导致出错
五，以下选择器分别是什么意思?
看注释
#header{}
<!--匹配ID="header"的元素-->
.header{}
<!--匹配class="header"的元素-->
.header .logo{}
<!--匹配claas="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元素的伪类-->````
##### 六，列出你知道的伪类选择器
答：
- `a:link{}`
- `a:visited{}`
- `a:action{}`
- `a:hover{}`
- `E:first-child{}` 匹配父元素的第一个子元素。
> 例如:
````<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<style type="text/css">
h3:first-child
{
color: red;
}
</style>
</head>
<body>
<h3>我是body的第一个子元素，所以红色匹配到我，</h3>
<p>我是body的第二个子元素，所以红色匹配不到我</p>
</body>
</html>````
- `E:last-child{}` 匹配父元素的最后一个子元素
- `E:first-of-style{}` 匹配父元素下使用同种标签的第一个元素，等同于`E:nth-of-type(1)`
>示例
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<style type="text/css">
h3:first-of-type
{
color: red;
}
p:first-of-type
{
color: blue;
}
</style>
</head>
<body>
<h3>我是第一个h标签，所以红色</h3>
<h3>我是第二个h标签，所以不是我</h3>
<p>我是第一个p标签，<strong>我肯定是蓝色</strong></p>
<p>我是第二个p标签，所以不是我</p>
</body>
</html>
- `E:last-of-style{}`匹配父元素下使用同种标签的最后一个元素，等同于`E:nth-last-of-type(1)`
常见的伪元素
- `E::before`在E元素之前插入生成的内容
- `E::after`在E元素之后插入生成的内容
上面两个伪元素必须使用`content`属性。
> 下面的代码样例中， ::before和 ::after
将会在p元素之前和之后插入新内容，它使用[content]属性也就是在内容上进行操作。
<!doctype html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<style type="text/css">
p:before
{
content: "p::Before";
color: #000;
border: 1px solid red;
border-radius: 2px;
}
p:after
{
content: "p::After";
color: #000;
border: 1px solid red;
border-radius: 2px;
}
</style>
</head>
<body>
<p>看看我前后的before和after</p>
</body>
</html>
- `E::first-line`匹配E元素内容的第一行
- `E::first-letter`匹配E元素内容的第一个字母
>示例
<!doctype html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<style type="text/css">
body{
width: 200px;
margin: 0 auto;
}
p:first-line
{
color: red;
}
p:first-letter
{
font-size: 2em;
}
</style>
</head>
<body>
<p>首行红色，首字2em，首行红色，首字2em，首行红色，首字2em，首行红色，首字2em，首行红色，首字2em，首行红色，首字2em，首行红色，首字2em</p>
</body>
</html>
##### 七，`:first-child`和`:first-of-type`的作用和区别
答：
**`:first-child`** 匹配的是某父元素的第一个子元素，可以说是结构上的第一个子元素。
**`:first-of-type`** 匹配的是某父元素下相同类型子元素中的第一个，比如 `p:first-of-type`，就是指所有类型为p的子元素中的第一个。这里不再限制是第一个子元素了，只要是该类型元素的第一个就行了。
同样类型的选择器 :last-child 和 :last-of-type、:nth-child(n) 和 :nth-of-type(n) 也可以这样去理解。
具体示例看上一个问题**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>````
答：代码效果图如下：
解析：
1. aa为红色，是因为它是div的第一个子元素。所以代码`.item1:first-child{ color: red;}`对它起作用。
- aa bb的的背景是蓝色，是因为p和h3分别是他们相同元素类型的第一个元素。所以代码`.item1:first-of-type{ background: blue;}`对他们起作用。
##### 九，text-align: center的作用是什么，作用在什么元素上？能让什么元素水平居中？
答：实现块级元素内的行内元素水平居中，**作用在块级元素上**，能让容器内部行内元素水平居中（包括 文字、图片、a链接等行内元素）
##### 十，如果遇到一个属性想知道兼容性，在哪查看?
答：使用[can i use](http://caniuse.com/)查看。