css选择器

一，CSS选择器常见的有几种?

答：

1. 基础选择器

• 组合选择器
• 属性选择器
• 伪类选择器
• 伪元素选择器

基础选择器

* { margin:0; padding:0;}

p { font-size:2em;}

.info { background:#ff0;}

p.info { background:#ff0;}

p.info.error { color:#900; font-weight:bold;}

p#info { background:#ff0;}

组合选择器

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派生选择器 < 内联样式

我是绿色，内部样式表优先于浏览器缺省

我是红色，类选择器优先于内部样式表

我是黄色，ID选择器优先于类选择器

我是蓝色，类选择器优先于内部样式表

我是青色，类派生选择器优先于类选择器

我还是青色，类派生选择器优先于所有类选择器

我是黄色，ID选择器优先于类派生选择器

我是紫色，ID派生选择器优先于类派生选择器

我还是紫色，ID派生选择器优先于所有类选择器

我还是紫色，ID派生选择器优先于所有ID选择器

我是黑色，内联样式驾到闲杂人等退下

````
一个元素同时应用多个class，后定义的优先（就近原则），加上!important者最优先！

选择器权重计算：

针对一个css选择器表达式，遇到一个id就往权重值中加100，遇到一个class就往权重值中加10，遇到一个标签就往权重值中加1。
div p#large ul.list 的权重值113。
div p#large ul.list li的权重值114。
从上面我们可以得出两个关键的因素：
权值的大小跟选择器的类型和数量有关，
样式的优先级跟样式的定义顺序有关。
规则：
选择器的权值加到一起，大的优先；如果权值相同，后定义的优先

参考资料1，参考资料2

三，class 和 id 的使用场景?

答：唯一 确定只用一次，就用id。重复多次使用就用class。尽量使用class。

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

答：

1. 保持可维护性

• 多人合作时避免和他人命名产生冲突
• 可以使代码具有可读性，更有语义化并且便于写代码和调试代码
• 避免因为命名不规范而导致出错

五，以下选择器分别是什么意思?

看注释

#header{}

.header{}

.header .logo{}

.header.mobile{}

.header p, .header h3{}

#header .nav>li{}

#header a:hover{}
````


##### 六，列出你知道的伪类选择器
答：
- `a:link{}`
- `a:visited{}`
- `a:action{}`
- `a:hover{}`
- `E:first-child{}` 匹配父元素的第一个子元素。
> 例如:
````







我是body的第一个子元素，所以红色匹配到我，
我是body的第二个子元素，所以红色匹配不到我

````


![效果](http://upload-images.jianshu.io/upload_images/2784414-87e72d79883609b2.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)


- `E:last-child{}` 匹配父元素的最后一个子元素
- `E:first-of-style{}` 匹配父元素下使用同种标签的第一个元素，等同于`E:nth-of-type(1)`
>示例

我是第一个h标签，所以红色

我是第二个h标签，所以不是我

我是第一个p标签，我肯定是蓝色

我是第二个p标签，所以不是我

![效果](http://upload-images.jianshu.io/upload_images/2784414-f601e4b98344ebdc.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

- `E:last-of-style{}`匹配父元素下使用同种标签的最后一个元素，等同于`E:nth-last-of-type(1)`

常见的伪元素
- `E::before`在E元素之前插入生成的内容
- `E::after`在E元素之后插入生成的内容
上面两个伪元素必须使用`content`属性。
> 下面的代码样例中， ::before和 ::after
将会在p元素之前和之后插入新内容，它使用[content]属性也就是在内容上进行操作。

看看我前后的before和after

![效果](http://upload-images.jianshu.io/upload_images/2784414-3d8b8fef4bc182c6.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

- `E::first-line`匹配E元素内容的第一行
- `E::first-letter`匹配E元素内容的第一个字母
>示例

首行红色，首字2em，首行红色，首字2em，首行红色，首字2em，首行红色，首字2em，首行红色，首字2em，首行红色，首字2em，首行红色，首字2em

![效果](http://upload-images.jianshu.io/upload_images/2784414-f133b520f6dc6a01.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

##### 七，`: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**的代码。

##### 八，运行如下代码，解析下输出样式的原因。
>````
 

 
aa
 
bb
 
ccc
 
````

答：代码效果图如下：

![代码效果图](http://upload-images.jianshu.io/upload_images/2784414-b5779d4e0d7b6f75.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
解析：
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/)查看。