CSS的一个重要特征就是继承，它是依赖于祖先-后代的关系的。继承是一种机制，它允许样式不仅可以应用于某个特定的元素，还可以应用于它的后代。

CSS可以继承的属性有：

　　1、文字相关：font-family、font-size、font-style、font-variant、font-weight、font、letter-spacing、line-height、text-align、text-indent、text-transform、word-spacing

　　2、列表相关：list-style-image、list-style-position、list-style-type、list-style

　　3、颜色相关:color

　　4、透明度：opacity(opacity的继承有问题，子元素会继承祖元素的opacity，但是无法更改。)

　　另外，font-size继承的是父元素的大小，而不是比例。line-height当父元素是百分比或px值的时候，子元素跟父元素相同，当父元素是normal或数字的时候，子元素的line-height是子元素的字体大小乘以数字。

css继承的优先级：

　　上面我们讨论了CSS的继承性和特殊性，在特殊性的框架下，被继承的特性值为0，这就意味着任何显示声明的规则将会覆盖其继承样式。因此，不管一条规则具有多高的权重，如果没有其他规则能应用于这个继承元素，那么它也只是个被继承的规则而已

CSS继承总结的更多相关文章

  1. 谈谈一些有趣的CSS题目（四）-- 从倒影说起，谈谈 CSS 继承 inherit

    开本系列,讨论一些有趣的 CSS 题目,抛开实用性而言,一些题目为了拓宽一下解决问题的思路,此外,涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题中有你感觉 ...

  2. 从倒影说起，谈谈 CSS 继承 inherit（转）

    从倒影说起,谈谈 CSS 继承 inherit 给定一张有如下背景图的 div: 制作如下的倒影效果: 方法很多,但是我们当然要寻找最快最便捷的方法,至少得是无论图片怎么变化,div 大小怎么变化,我 ...

  3. css继承样式怎么控制?用选择器

    css样式继承性是指下级的样式属性会继承上级的属性,通俗点讲是儿子来继承父亲的属性,比如li会继承ul的属性.css继承原理是我们设置上级(父级)的CSS样式,上级(父级)及以下的子级(下级)都具有此 ...

  4. CSS继承元素属性

    CSS继承的元素属性 所有元素可继承: visibility和cursor 内联元素和块级元素可继承: letter-spacing.word-spacing.white-space.line-hei ...

  5. CSS继承—深入剖析

    CSS的继承是指被包在内部的标签将拥有外部标签的样式性质.继承特性最典型的应用通常发挥在整个网页的样式预设,即整体布局声明.而需要要指定为其它样式的部份设定在个别元素里即可达到效果.这项特性可以给网页 ...

  6. 谈谈一些有趣的CSS题目-- 从倒影说起，谈谈 CSS 继承 inherit

      开本系列,讨论一些有趣的 CSS 题目,抛开实用性而言,一些题目为了拓宽一下解决问题的思路,此外,涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题中有你 ...

  7. CSS继承的特殊性

    p{color:red;} .first{color:green;} <p class="first">三年级时,我还是一个<span>胆小如鼠</s ...

  8. CSS 继承深度解析

    FROM ME: 之前在研究前端性能优化的时候,就有学习关于CSS中“善用CSS中的继承”. 原文:CSS Inheritance, The Cascade And Global Scope: You ...

  9. CSS继承、层叠和特殊性

    1.继承 (1)样式应用于某个特定的HTML标签元素,而且应用于其后代. (2)但某些标签不适用,如border: (3)例子:p{color:red;}设置了颜色 <p class=" ...

随机推荐

  1. BZOJ4690: Never Wait for Weights

    裸带权并查集. #include<cstdio> #define N 100005 int m,i,j,s,t,u,d[N],p[N]; char k; int find(int i){ ...

  2. BZOJ4522: [Cqoi2016]密钥破解

    pollard's rho模板题. 调参调到160ms无能为力了,应该是写法问题,不玩了. #include<bits/stdc++.h> using namespace std; typ ...

  3. 最简单的jQuery插件

    <script src="./jquery-1.7.1.min.js"></script><script>;(function($,undefi ...

  4. 在spark-shell里用集群方式启动时加入用户需要的jar

    希望在spark-shell中测试集群方式的elasticsearch操作, # 1 首先下载相关的jar # 2 启动spark-shell时用--jars ./bin/spark-shell –m ...

  5. JavaWeb学习笔记——开发动态WEB资源（四）打印当前使用的是get方法

    该工程的名称是testhttp,功能是在页面中表格打印浏览过程中的相关头信息. 新建一个工程,然后在这个工程里面新建一个servlet,这样便可以省去编写web.xml的过程 以下是TestHttpS ...

  6. Webpack 之 Loader 的使用

    安装 loaders 如果loader在npm里,可以这样安装: $ npm install xxx-loader --save 或者 $ npm install xxx-loader --save- ...

  7. yourphp 遇见问题及解决办法

    1.前台页面提交出现 __NOLAYOUT__ 解决把法: 在Public 文件下找到 success.html,error.html,exception.html 头部去掉就可以

  8. asp.net常用函数表

    文章转载于[IT花园]:http://www.itgarden.com.cn/showtopic-29.aspx Abs(number) 取得数值的绝对值. Asc(String) 取得字符串表达式的 ...

  9. yum提示字符编码错误

    1.问题描述: [root@localhost data]# yum Loaded plugins: product-id, refresh-packagekit, security, subscri ...

  10. 缓存 HttpContext.Current.Cache和HttpRuntime.Cache的区别

    先看MSDN上的解释: HttpContext.Current.Cache:为当前 HTTP 请求获取Cache对象. HttpRuntime.Cache:获取当前应用程序的Cache.  我们再用. ...