CSS的继承性与优先级

一、CSS的继承性

　　在CSS中不可继承的属性：display、margin、padding、border、background、width、min-width、max-width、height、min-height、max-height、overflow、position、left、right、top、bottom、z-index、float、clear、vertical-align、page-break-after、page-break-before等

　　所有元素可继承的属性：visibility和cursor

　　内联元素可继承的属性：letter-spacing、word-spacing、white-space、line-height、color、font、font-family、font-size、font-style、font-variant、font-weight、text- decoration、text-transform、direction

　　块元素可继承的属性：text-align和text-indent

　　列表元素可继承的属性：list-style、list-style-type、list-style-position、list-style-image

　　表格元素可继承的属性：border-collapse

二、CSS的优先级

样式的优先级：

多重样式（如果外部样式、内部样式和内联样式同时应用于同一个元素）的情况下，优先级为：内联样式 > 内部样式 > 外部样式 。有个例外的情况，当外部样式位于内部样式的后面时，外部样式将覆盖内部样式

选择器的优先级：

(1)内联样式表的权值最高为1000

(2) id 选择器的权值为100

(3) class 类选择器的权值为10

(4) html 标签选择器的权值为1

一个CSS样式的权值 = 出现的各级别的选择器的权值分别相加；

例如：

在外部CSS文件中或<style>标签中如下定义：

p  {color: red;}    /*一个标签选择器，权值为1*/

div  p {color:  red;}    /*两个标签选择器器，权值为2*/

#te .tt {color:  red;}    /*一个id选择器，一个类选择器，权值为110*/

在某个标签的style属性中如下定义：

p  {color: red;}    /*在内联样式表中定义，一个标签选择器，权值为1001*/

优先级法则：

1、选择器都有一个权值，权值越大越优先；

2、当权值相等时，后出现的样式表设置要优于先出现的样式表设置；

3、创作者的规则高于浏览者，即网页编写者设置的CSS样式的优先级高于浏览器所设置的样式；

4、继承的CSS样式不如后来指定的CSS样式；

5、在同一组属性中标有“!important”规则的优先级最大；

例如：

//css
p {color:red;}
#test p {color:green;}

//html
<p>test1</p>
<div id="test"><p>test2</p></div>

　　结果如下：