CSS的样式表继承指的是，特定的CSS属性向下传递到子孙元素。总的来说，一个HTML文档就是一个家族，然后html元素有两个子元素，相当于它的儿子，分别是head和body，然后body和head各自还会有自己的儿子，最终形成了一张以下的家族谱。

在上图中，可以看到，body的子元素有三个，h1、p和ul，ul也有几个子元素，p也有1个子元素，那么li和a就都是body的后代元素。有时可能我们在body里面设置了一些属性，结果，body下面所有的后代元素都可能享受到，这就是样式继承。就像一句俗语一样，“龙生龙，凤生凤，老鼠的儿子会打洞”。样式继承，可以给我们的网页布局带来很多的便利，让我们的代码变得更加简洁，但是，如果不了解，或者使用不当，也有可能会给我们带来很多不必要的麻烦。

因此，如果了解了哪些样式是会继承到后代元素的，那么就可以避免这些问题的发生了。

文本相关属性      
font-family font-size letter-spacing line-height
font-style font-variant text-align text-indent
font-weight font text-transform word-spacing
color direction    
列表相关属性      
list-style-image list-style-position list-style-type list-style
表格和其他相关属性      
border-collapse border-spacing caption-side empty-cells
cursor      

CSS——样式继承的更多相关文章

  1. CSS3学习笔记-1：CSS样式继承

    自己在写css时总会遇上css样式继承的问题,好在一般问题不大,但一直也不明白css样式继承的规则,最近发现了一篇文章讲的不错,因此转载过来: 所谓CSS的继承是指被包在内部的标签将拥有外部标签的样式 ...

  2. css样式继承规则详解

    css样式继承规则详解 一.总结 一句话总结:继承而发生样式冲突时,最近祖先获胜(最近原则). 1.继承中哪些样式不会被继承? 多数边框类属性,比如象Padding(补白),Margin(边界),背景 ...

  3. css样式重叠、css样式继承、css 属性计算，，a元素下的文字颜色不能继承

    1.属性的重叠 在渲染前浏览器将判断使用哪个样式 我们书写的样式会覆盖浏览器的自带样式 我们写的样式进行权重比较,规则如下 !import Infiniti无穷大 进制伪256行内样式 1000.id ...

  4. css样式继承 第7节

    样式继承: <html> <head> <title>样式继承</title> <style type="text/css"& ...

  5. html css 样式继承的问题

    body 设置css中可以继承的属性:letter-spacing.word-spacing.white-space.line-height.color.font等 但有时,body的样式,不能在有的 ...

  6. css样式继承经验记录

    与元素(文字颜色.字体等)相关的样式默认会被继承: 与元素在页面上的布局相关的样式默认不会被继承: <body> <p>I like <span>aplles< ...

  7. CSS样式继承性

    CSS样式继承介绍 外层元素身上的样式会被内层元素所继承. 当内层元素身上的样式与外层的元素身上的样式相同时内层元素样式会覆盖外层元素样式. 并不是所有的样式都能够继承,只有文本与字体样式属性才能够被 ...

  8. css样式权重优先级，css样式优先级

    原文:http://www.bkjia.com/Javascri... 样式选择器权重优先级: important > 内嵌样式 > ID > 类 > 标签 | 伪类 | 属性 ...

  9. CSS样式表继承详解

    最近在恶补css样式表的基础知识.上次研究了css样式表之冲突问题详解 .这次是对 css 继承 特性的学习. 什么是css 继承?要想了解css样式表的继承,我们先从文档树(HTML DOM)开始. ...

  10. css——样式的继承

    css的样式继承 在上面这段代码中,p{}为父类,b{}为子类.b{}将继承p{}. 因为<b>在<p>里面,p{}为父类,b{}为子类. 继承方式: 如果子类没有,父类有,则 ...

随机推荐

  1. CTFshow Reverse 逆向4 学习记录

    题目 分析过程 是一个无壳,64位的文件 丢到IDA里面,找到main函数 1 int __cdecl __noreturn main(int argc, const char **argv, con ...

  2. 如何在报表中绘制 SVG 统计图

    SVG 作为一种矢量图形,具有任意缩放不失真.可被高质量打印.文件较小.交互性强等优势,正逐渐成为一种主流的图片格式.润乾报表一方面可以生成 SVG 格式的统计图,另一方面也可以在 HTML5 中直接 ...

  3. 重新点亮linux 命令树————文件列表查看命令[二]

    前言 整理一下文件查看命令 正文 主要是pwd和ls命令 pwd 这个是一个非常常用的命令,在shell脚本中基本都有,表示的是当前目录. 这是一个非常简单,但是非常实用的命令. 通过使用pwd -- ...

  4. MMDeploy部署实战系列【第三章】：MMdeploy pytorch模型转换onnx，tensorrt

    MMDeploy部署实战系列[第三章]:MMdeploy pytorch模型转换onnx,tensorrt 这个系列是一个随笔,是我走过的一些路,有些地方可能不太完善.如果有那个地方没看懂,评论区问就 ...

  5. windows下redis主从配置

    1,复制两个redis文件夹,粘贴在同级目录下 2,分别修改6380和6381文件夹中的redis.window.conf文件 port:分别改为6380.6381 均增加:slaveof 127.0 ...

  6. Faiss 向量库编译安装

    Faiss 是 Facebook 开源的一套高效相似性搜索以及向量聚类的开发库,支持各类相似性搜索的算法,Faiss 项目本身是使用 C++ 编写的,但是提供 Python 的绑定,可以直接使用 nu ...

  7. 剑指offer56(Java)-数组中出现的次数Ⅰ（中等）

    题目: 一个整型数组 nums 里除两个数字之外,其他数字都出现了两次.请写程序找出这两个只出现一次的数字.要求时间复杂度是O(n),空间复杂度是O(1). 示例 1: 输入:nums = [4,1, ...

  8. HarmonyOS NEXT应用开发案例——滑动页面信息隐藏与组件位移效果

    介绍 在很多应用中,向上滑动"我的"页面,页面顶部会有如下变化效果:一部分信息逐渐隐藏,另一部分信息逐渐显示,同时一些组件会进行缩放或者位置移动.向下滑动时则相反. 效果图预览 使 ...

  9. [PHP] Laravel 联查中对不同表字段关系加条件的方式

    如果条件需要加在 where 条件里,使用 whereColumn,如下示例: whereColumn('A.b_id', '=', 'B.id'); 如果需要加载 join 的 on 之后作为多个条 ...

  10. [FAQ] Error: Component series.bar not exists. Load it first. (echarts)

    以上错误出现在使用 echarts 组件时,未导入或者使用不正确的情况下. 检查是否导入 line 或者 bar 这一类具体的 chart,比如: import 'echarts/lib/chart/ ...