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. python Scrapy安装和介绍

    python Scrapy安装和介绍 Windows7下安装1.执行easy_install Scrapy Centos6.5下安装 1.库文件安装yum install libxslt-devel ...

  2. GMap.NET使用一

    https://greatmaps.codeplex.com/releases/view/20235 从上面网站下载需要的组件dll,也可以下载源码研究,解压后有两个文件夹,如图1所示,根据不同的fr ...

  3. 生成N个二进制位的组合

    #include "stdafx.h" #include "stdlib.h" #include "stdio.h" #include &l ...

  4. 自然语言18.2_NLTK命名实体识别

    QQ:231469242 欢迎nltk爱好者交流 http://blog.csdn.net/u010718606/article/details/50148261 NLTK中对于很多自然语言处理应用有 ...

  5. flask安装及第一个程序

    1.flask是一个轻量级的python web框架 ·1.Flask 依赖两个外部库: Jinja2 模板引擎和 Werkzeug WSGI 套件 ·2.安装: # easy_install fla ...

  6. memcached命令行操作详解,命令选项的详细解释

    连接到memcached命令行下:  telnet 127.0.0.1 11211 1.set / add / replace : 格式:<command> <key> < ...

  7. Cobbler自动化批量部署CentOS6.5系统

    Cobbler作为一个预备工具,使批量部署Red Hat/Centos/Fedora系统更容易,同时也支持Suse和Debian系统的部署. 它提供以下服务集成: * PXE服务支持 * DHCP服务 ...

  8. python 多线程就这么简单

    原文地址:http://www.cnblogs.com/fnng/p/3670789.html

  9. Jquery中$.load(),$.get(),$.post(),$.ajax(),$.getJSON()的作用与不同

    这个五个都是获取页面或者数据的方法.. 都是基于Ajax协议的..   $.get(url,[data],[callback])     //描述: 从服务器加载数据,请求方式为GET.  url   ...

  10. Java调试

    线上load高的问题排查步骤是: 先用top找到耗资源的进程 ps+grep找到对应的java进程/线程 jstack分析哪些线程阻塞了,阻塞在哪里 jstat看看FullGC频率 jmap看看有没有 ...