首页 > 代码库 > CSS的继承性与优先级

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>

 

  结果如下:

  技术分享

 

CSS的继承性与优先级