一、CSS选择器
1、什么是选择器
每一条CSS样式声明由两部分组成，选择器{样式}
在{}之前的就是选择器，选择器指明了{}中样式的作用对象，也就是样式作用于网页中哪些元素
2.选择器的分类
（1）、标签选择器
标签选择器就是HTML中的标签，如<body>, <h1>, < p>,<img>等
例如：
p{color:red;line-height:30px;}
（2）、类选择器
之所以存在类选择器就是给标签起了一个类名，从而可以用这个类名来进行CSS样式声明,记住类名不能是中文
例如：
<p class="flag"> 这是一个类标签</p>
于是，CSS声明如下;
.flag{color:yellow;margin;0 auto;}
（3）、id选择器
在很多地方。id选择器类似于类选择器，但是也有一些重要的区别：
1.为标签设置id=“id名称“ 而不是class=“类名”
2.id选择符前面是#不是英文圆点
3.id选择器在文档中只能使用一次，而类选择器可以多次使用
例如：
定义id选择器：
<p id="ex1">这是一个id选择器。</p>
使用id选择器：
#ex1 {padding:1cm;color: red;}
（4）、子选择器
子选择器会选择到父标签下的所有同级且名称相同的标签，并将样式作用于被选择的标签中，在此一定要区分好父标签下的所有同级且名称相同的标签，就好像你爷爷有3个儿子，6个孙子，爷爷把遗传特征全部遗传给了儿子，而没有遗传给孙子，所以爷爷的遗传作用只会作用于儿子，孙子不受影响（这里只是一个比喻）
例如：
<父标签>
<儿子1>这是儿子标签1<儿子1>
<儿子2>这是儿子标签2
<孙子1>这是孙子标签1<孙子1>
<儿子2>
<别人家儿子1>这是别人家的儿子标签1<别人家儿子1>
</父标签>
自己家的儿子会继承父标签的样式，别人家的儿子不会继承，这就是说，在使用子选择器的时候，只要指定了子标签的名字（>后面的标签名），在父标签里面所有同级的且名字相同的子标签都会被指定的样式所作用，而其他的标签则不会被作用，并且其他标签中如果存在相同名字的标签，也不会被作用。这就是子选择器的作用。
（5）、后代选择器
根据上面对子选择器的解释，name后代选择器就是不管自己家的儿子还是别人家的儿子，只要是存在于同一个父标签中，且名字为指定的后代名的标签，都会被相同样式作用，这就是后代选择器的强大之处！
（6）通用选择器
通用选择器是功能最强大的选择器，它使用*来将HTML中所有的标签全部选中，然后将样式作用于所有标签中。
（7）分组选择器
当你向把多个标签中的内容样式设置为统一样式的时候，分组选择器是最佳选择
如：div,p,.flag{样式}
（8）伪类选择符
伪类选择符号可以给HTML中不存在的标签设置样式，可以设置鼠标滑过的样式，点击时候的样式等
例如：
a：hover{color:red;]
当鼠标滑过a标签时，文字就会变成红色
二、选择器的优先级及权重及计算
1.优先级分类
通常可以将css的优先级由高到低分为6组：
- 第一优先级：无条件优先的属性只需要在属性后面使用！important。它会覆盖页面内任何位置定义的元素样式。ie6不支持该属性。
- 第二优先级：在html中给元素标签加style，即内联样式。该方法会造成css难以管理，所以不推荐使用。
- 第三优先级：由一个或多个id选择器来定义。例如，#id{margin:0;}会覆盖.classname{margin:3pxl}
- 第四优先级：由一个或多个类选择器、属性选择器、伪类选择器定义。如.classname{margin:3px}会覆盖div{margin:6px;}
- 第五优先级：由一个或多个类型选择器定义。如div{marigin:6px;}覆盖*{margin:10px；}
- 第六优先级：通配选择器，如*{marigin:6px;}
2.选择器权重
我们把特殊性分为4个等级，每一个等级代表一类选择器，没个等级的值相加得出选择器的权重。
4个等级的定义如下：
- 第一等级：代表内联样式，如style=""，权值为 1000
- 第二等级：代表id选择器，如#content，权值为100
- 第三等级：代表类，伪类和属性选择器，如.content，权值为10
- 第四等级：代表标签选择器和伪元素选择器，如div p，权值为1
注意：通用选择器（*），子选择器（>），和相邻同胞选择器（+）并不在这个等级中，所以他们的权值为0