CSS选择器

1.CSS里常见选择器有几种？

属性选择器
id选择器
类选择器
多元素选择器，用 , 分隔，用于同时选择多个元素
后代选择器，用空格分隔，如div p { }用于匹配div元素的后代p元素
子元素选择器，用 > 分隔，用于匹配父元素的所有直接子元素
伪类选择器，常用的有:link , :hover , :visited , :active , :focus，其中:active要在:hover之后才能实现其样式效果
伪类元素选择器，常用的有 :first-link用于匹配元素第一行，:first-letter 用于匹配元素第一个字母，:before在元素之前插入生成的内容，:after 在元素之后插入生成的内容

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

由高到低排序：

在属性后面使用!important是最高优先级，可以覆盖任何位置定义的属性
作为style属性写在元素标签上的内联样式
id选择器
类选择器
伪类选择器
属性选择器
标签选择器
通配符选择器
浏览器自定义

3.class 和 id 的使用场景？

class 是元素的类名，一个元素可以有多个类名，一个类名可以用来匹配多个元素，class选择器用于为网页不同部分的元素匹配相同的样式。
id 是元素独有的，一个元素只能有一个id，id也只能用来匹配一个元素，id选择器用于为网页中独特元素匹配属性。

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

使代码更具语义化，便于阅读，方便后期的维护。

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

#header { }，匹配 id 值为 header 的元素
.header { }，匹配 class 值为 header 的元素
.header .logo { }，匹配 class 值为 header 的元素下 clas s值为 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 { } ，匹配当a鼠标指针指上去是的样式。

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

常用的伪类选择器有：:link , :hover , :visited , :active , :focus，其中:active要在:hover之后才能实现其样式效果

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

````E:first-child```是指元素 E 的父元素中的第一个子元素；
E:first-of-type是匹配元素 E 的父元素中第一个与 E 相同类型的子元素。

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>任务8</title>
</head>
<body>
<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>
</body>
</html>```

Paste_Image.png

样式 .item1:first-child{ color: red; } 的作用是将 class="item" 的元素的父元素即 class="ct" 里边的第一个元素即 <p class="item1">aa</p> 文字的颜色设置成红色。
样式.item1:first-of-type{ background: blue; }匹配的是class="item" 的元素的父元素即 class="ct" 里边的第一个与其相同类型的元素，但因为h3与p的class值相同，所以同时匹配到了p和第一个h3。

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

text-align: center的作用是使块级元素内的行内元素相对该块级元素水品居中，有继承性，该样式添加在该块级元素（即例子中的.ct）上。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>任务8</title>
<style>
.ct {
text-align:center;
width:300px;
background-color:#bbb;
}
.div2 {
background-color:red;
width:200px;
}
</style>
</head>
<body>
<div class="ct">
<p class="item1">包括路易威登（LVHM）、开云（Kering）和爱马仕（Hermes）等著名品牌在内的“制造商联盟”（Unifab）星期四（6月16日）发表声明说，马云的谈话是误导性的，甚至是诽谤性的，与打击假货的有效行动背道而驰。</p>
<h3 class="item1">bb</h3>
<h3 class="item1">ccc</h3>
<div class="div2">
<h2>dddd</h2>
</div>
</div>
</body>
</html>

实现效果：

![Paste_Image.png](http://upload-images.jianshu.io/upload_images/2198142-946fa1b5651845c6.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

###9.如果遇到一个属性想知道兼容性，在哪查看？
在[caniuse](http://caniuse.com/)中查看。
***
本教程版权归本人和饥人谷所有，转载请注明出处。