首页 > 代码库 > 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的继承性与优先级