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. Python设计模式----2.工厂模式

    工厂方法模式是简单工厂模式的衍生,解决了许多简单工厂模式的问题 首先完全实现'开-闭 原则',实现了可扩展.其次更复杂的层次结构,可以应用于产品结果复杂的场合. 工厂方法模式的对简单工厂模式进行了抽象 ...

  2. xilinx下载器,JTAG-HS3和Platform Cable USB II 速度对比

    下面测试速度,以一个V7的配置文件为例子.文件大小如下,27MB.特别是对于有点规模的项目配置文件都是很大的.总不能是点灯项目. 选择普通的下载器,Platform Cable USB.这种下载器是基 ...

  3. Windows 系统上如何安装 Python 环境(详细教程)

    Windows 系统上如何安装 Python 环境(详细教程) 目前,Python有两个版本,一个是2.x版,一个是3.x版,这两个版本是不兼容的.由于2.x版官方只维护到2020年,所以以3.x版作 ...

  4. esp8266,arduino,网页显示dht11温湿度,控制继电器开关,局域网智能家居

    不说了,上代码,用arduino实现esp8266代码 #include <ESP8266WiFi.h> #include <WiFiClient.h> #include &l ...

  5. Oracle邮件发送(内容中带有收件人独有信息)

    Oracle邮件发送(内容中带有收件人独有信息) Oracle邮件发送(内容中带有收件人独有信息) Oracle发送邮件最简单的应该就是用smtp,具体使用和参数讲解我这儿没有 简单来说,发送邮件的思 ...

  6. 更便捷:阿里云DCDN离线日志转存全新升级

    简介: 1月6日,阿里云CDN年度产品升级发布会中,阿里云CDN产品专家邓建伟宣布DCDN离线日志转存全新升级,并对离线日志转存方案的价值.应用及使用进行了详细解读. 在日常CDN加速服务过程中会产生 ...

  7. 兑现 Service Mesh 的新价值:精确控制“爆炸半径”

    ​简介:本文分享了阿里云内部所沉淀的全链路流量打标与路由的能力,做出服务网格技术新体验的同时,很好地兑现了服务网格的新价值. 作者:至简 软件是以持续迭代的方式去不断演进的.某种程度上,我们并不担心软 ...

  8. 当微服务遇上 Serverless | 微服务容器化最短路径,微服务 on Serverless 最佳实践

    ​简介: 阿里云Serverless应用引擎(SAE)初衷是让客户不改任何代码,不改变应用部署方式,就可以享受到微服务+K8s+Serverless的完整体验,开箱即用免运维. 前言 微服务作为一种更 ...

  9. 鸿蒙HarmonyOS实战-ArkUI动画(页面转场动画)

    前言 页面转场动画是指在应用程序中,当用户导航到另一个页面时,使用动画效果来过渡页面之间的切换.这样做的目的是为了提升用户体验,使页面之间的切换更加平滑和有趣. 常见的页面转场动画包括淡入淡出.滑动. ...

  10. [FAQ] PHP+Nginx 架构网站 502 和 504 问题

    502 Bad Gateway:作为网关或者代理工作的服务器尝试执行请求时,从上游服务器接收到无效的响应.504 Gateway Time-out:作为网关或者代理工作的服务器尝试执行请求时,未能及时 ...