CSS选择器与样式优先级

一条CSS规则包含两个部分：选择器和声明块，其中选择器决定了声明块中的CSS样式，掌握选择器的用法是掌握CSS的基础之一。CSS中的选择器基本可以分为以下几种类型：元素选择器、关系选择器、属性选择器、伪类选择器和伪元素选择器：

一、CSS选择器

元素选择器：元素选择器是应用最多的一类选择器，元素选择器包括，

[1]元素选择器：以元素的标签名称作为选择器，例如：div{}，h2{}

[2]ID选择器：以元素的id属性作为选择器，例如一个标签为：<div id="first"></div>，那么对这个元素使用ID选择器为:#first{}

[3]类选择器：以元素的class属性作为选择器，例如一个标签为：<div class="demo"></div>，那么对这个元素使用ID选择器为:.demo{}

[4]通配符选择器：应用于所有元素的选择器： *{}， 一般情况下通配符选择要慎用

关系选择器：关系选择器即利用元素之间的关系进行筛选，关系选择器主要包括：

后代选择器：E F ，所有被E包含的F元素，即所有作为E元素后代的F元素

子选择器：E>F，所有作为E元素的子元素的F元素，与后台选择器不同，子选择器限定必须是父元素的子元素才符合要求。IE6不支持子选择符

相邻选择器：E+F，紧邻在E元素之后的F元素，F与E元素必须是同级元素。IE6不支持

兄弟选择器：E~F，E元素之后的所有兄弟F元素。IE6不支持

属性选择器：属性选择器即利用元素的属性或者属性值来决定样式应用于哪些元素， 属性选择器既可以根据有无对应属性来筛选，也可以根据属性值来筛选。IE6及以下的版本不支持属性选择器。

E[attr]：选择具有属性attr的元素

E[attr='val']：具有属性attr且属性值为val的元素

E[attr^='val']：具有属性attr且属性值以val开头的元素

E[attr$='val']：具有属性attr且属性值以val结尾的元素

E[attr*='val']：具有属性attr且属性值包含val的元素

E[attr|='val']：具有属性attr且属性值以val开头并且用“-”分隔的元素

E[attr~='val']：具有属性attr且属性值以空格分隔，其中一个值为val的元素

伪类选择器：伪类选择器最常用的就是关于链接的伪类了，比如link，visited等，CSS3中又增添了一些新的伪类选择器。

首先看链接伪类：

a:link：设置超链接a在未被访问前的样式。

a:visited：设置超链接a在其链接地址已被访问过时的样式

动态伪类：

E:hover：设置元素在鼠标悬停时的样式

E:active：设置元素在被激活(在鼠标点击与释放之间)时的样式

E:focus： 设置元素在取得焦点后的样式

注意点：

[1]对于锚点类的伪类，设置时需要注意设置的顺序，即：link->visited->hover->active，如果顺序不对可能会带来意想不到的错误。

[2]对于hover伪类，IE6只支持链接元素a 的hover，IE6-7不支持:active和:focus伪类

UI元素状态伪类：

E:empty：匹配没有任何子元素的E元素。

E:enabled：匹配界面上处于可用状态的元素E。

E:disabled：匹配界面上处于不可用状态的元素E。

E:checked：匹配界面上被选中的元素E(主要用于input type为radio与checkbox)

CSS3新增的伪类：

E:first-child：作为父元素的第一个子元素的E元素

E:last-child：作为父元素的最后一个子元素的E元素

E:nth-child(n)：父元素的第n个子元素

E:nth-last-child(n)：父元素的倒数第n个子元素

E:first-of-type：同类型中的第一个同级兄弟元素E

E:last-of-type：同类型中的第一个同级兄弟元素E

E:only-of-type：同类型中的唯一一个元素E

E:nth-of-type()：同类型中的第n个同级元素E

E:nth-last-of-type()：同类型中的倒数第n个同级元素E

IE6-8都不支持这些伪类选择器。

伪对象选择器：

E:first-letter/E::first-letter ：设置对象内第一个字符的样式

E:first-line/E::first-line ：设置对象内第一行字符的样式

注意点：IE6在使用该选择符时有个显式的BUG：选择符与包含规则的花括号之间不能紧挨着，需留有空格或换行

E:befor/E:after：用来设置对象前、后的内容，与content属性一起使用。IE6-8不支持

E:selection:设置对象被选中时的样式，IE6，7都不支持。

二、样式的优先级

样式的优先级
  首先CSS的样式包括三种类型：外部样式   内部样式     内联样式      其优先级依次升高     例外情况：如果外部样式放在内部样式后面引入，那么外部样式将会覆盖内部样式。

选择器
 CSS中的选择器包括：内联样式（1000）  id选择器（100）  类选择器（10）   标签选择器（1）

  对于一个具体的CSS样式，将不同选择器的权值相加之和，权值之和最大的就是最终显示的样式。

CSS优先级法则
    （1）选择器都有一个权值，权值最大的优先。
    （2）当权值相等时，后出现的样式要优于先出现的样式。
    （3）创作者的规则高于浏览者：即自定义的样式要优于浏览器设置的样式。
    （4）继承的样式不如后来指定的样式。
    （5）在同一种属性中定义了"!important"的规则优先级最大
         在IE6中，如果important指定的属性在一个样式中定义了多次，那么important是不起作用的。比如.test{color:#f00 !important; color:#00f;}, 但是如果这样写的就可以.test{color:#f00 !important;} .test{color:#00f;}，这样的话在IE6中显示也将是红色。