CSS中的继承是什么?像子女可以继承父亲或祖先的遗产一样,在CSS中,后代元素可以继承祖先元素的样式。
1. 什么是继承
CSS继承是指设置父级的CSS样式之后,父级及以下的子级都具有此属性。
【例1】在HTML页面中创建一个div元素,class名为box,div元素中包含6个p元素,设置p元素的字体为微软雅黑,CSS代码如下。
<style> p{ color:deeppink ; font-family:"微软雅黑 "; } </style>
HTML代码如下。
<body> <div class="box"> <p> 第一段文字 </p> <p> 第二段文字 </p> <p> 第三段文字 </p> <p> 第四段文字 </p> <p> 第五段文字 </p> <p> 第六段文字 </p> </div> </body>
代码运行结果如图1所示。
图1 浏览显示效果
给p元素的父级div元素添加CSS样式color:#41abe1。div元素内部的p元素继承了color属性,文字显示为蓝色,如图2所示。CSS代码如下。
.box{ color:#41abe1; } p{ font-family:"微软雅黑 "; }
图2 浏览器显示效果
2. 元素自身的样式优先于继承的样式
当元素从父级继承的属性与自身的属性发生冲突的时候,浏览器会优先显示元素自身的属性。
【例2】在图2的基础上,给p元素添加CSS样式color:deeppink,文字颜色由蓝色变为粉色,如图3所示。CSS代码如下。
.box{ color:#41abe1; } p{ color:deeppink; font-family:"微软雅黑 "; }
图3 浏览器显示效果
3. 不是所有的样式都可以继承
一般来说,影响文字外观的属性如字体颜色、样式、大小、字体等都可以被继承,其他属性如边框、<a>标签的颜色等是不可以被继承的。可以通过自己的理解加上实验来确定哪些属性可以继承。