通常我们设置样式是基于6个选择符群组进行的，优先级由高到低列出如下：
　　1. 使用!important规则的群组有最高的优先级，它们会覆盖所有非!importance的规则。所以如果你想要某个特殊的样式生效，只需要在其后面加上这个属性，如 但作为一项Hack技术，它并不被推荐使用。
　　2. 拥有第二高优先级的当属内嵌在<style></style>标签内或直接与HTML代码混写的行内样式，用一个值来标志它，它值1000分。当然这种方式是我们一开始就摒弃的。
　　3. 优先级第三高的群组是那些拥有ID选择符的规则，ID使一个元素拥有只属于它的唯一标示符，在css里使用#作前缀来表示，它值100分。
　　4. 接下来就轮到含有类、属性或伪类选择符的规则了，定义了class的元素，在css里用 .作前缀符引用，属性选择符如a[title="here"]{}; （注意：虽然属性选择符很好用，但并不被IE很好地支持——万恶的IE！！）伪类则是指:hover，:link等，它们值10分。
　　5. 元素或伪元素（如:first-child）选择符的优先级被排在第五位，它们的值为1分。
　　6. 排在最后的自然就是通配符规则了，通常我们使用它是为了初始化样式，如*{ margin:0;padding:0}等。另外*通配符还可以用在派生选择器里，如在HTML文件里有标签
　　　　
　　在css文件里设置

　　此时p标签里的文字大小为10px，而div里p标签之外的文字都会是16px;如果将css的第一行改成这样

　　此时p标签的文字大小就变成了16px——这是因为通配符使样式用在了div的各个标签内，且由于ID选择器优先级高于类，从而将它本身的样式覆盖了。
　　设置样式时我们还通常使用派生选择器，即在一个祖先标签后跟子孙标签并用空格符做分隔，如div p{} 或#h2 .p1{} 等，此时选择器的分值为各选择器的总和，如前者由两个元素选择符组成，其值为1+1=2；而后者则是由一个ID选择器和一个类选择器组成，其值为100+10=110；浏览器按这样计算出来的分值高低来判定各样式的优先级，对同一个元素设置了一种属性的不同样式时，优先级高的样式会覆盖优先级低的。了解了这个原理，你就很容易知道为什么你设置的样式无效了。 （这里强烈推荐使用Firefox下的firebug和web developer工具来查看元素的样式）
　　最后你可能还会问，如果竞争规则的分值相等时，会发生什么事情呢？这里就还存在一个位置优先级的问题，同样它也有6个群组，按优先级降序列出如下：

　　1. 位于<style></style>标签内或者嵌在HTML代码里的行内样式会覆盖使用link或@import标签引用的css样式。
　　2. 在<style>里使用@import导入的样式表位于此级。
　　3. 使用<link>标签导入的样式。
　　4. 在<link>链接的样式表中通过@import导入的样式。
　　5. 终端用户绑定的样式表，如应用了系统主题的样式。
　　6. 最后就是浏览器提供的默认样式，这个很容易被忽略又至关重要，因为不同浏览器提供的默认样式往往不同，所以我们通常会写一个基准样式表来使页面在各浏览器都一致显示。
　　当在相同的位置等级输入或绑定多个样式表的时候，后绑定的样式会覆盖前面的样式表;当竞争规则处于一个选择符群组且等级分值和位置均相同时，后面的规则会覆盖前面的规则。
　　如有html标签

　　对它们应用样式

　　DIV显示为绿色；而如果这样设置

　　此时DIV显示为红色。