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. 哨兵的多个核心底层原理的深入解析(包含slave选举算法)

    一.sdown和odown转换机制sdown和odown两种失败状态 sdown是主观宕机,就一个哨兵如果自己觉得一个master宕机了,那么就是主观宕机odown是客观宕机,如果quorum数量的哨 ...

  2. 【编程】C++ 常用容器以及一些应用案例

    介绍一些我常用的C++容器和使用方法,以及使用案例.blog 1 概述 容器(Container)是一个存储其他对象集合的持有者对象.容器以类模板实现,对支持的元素类型有很大的灵活性.容器管理元素的存 ...

  3. 力扣1127(MySQL)-用户购买平台(困难)

    题目: 支出表: Spending 这张表记录了用户在一个在线购物网站的支出历史,该在线购物平台同时拥有桌面端('desktop')和手机端('mobile')的应用程序.这张表的主键是 (user_ ...

  4. 力扣1773(java&python)-统计匹配检索规则的物品数量(简单)

    题目: 给你一个数组 items ,其中 items[i] = [typei, colori, namei] ,描述第 i 件物品的类型.颜色以及名称. 另给你一条由两个字符串 ruleKey 和 r ...

  5. 力扣49(java)-字母异位词分组(中等)

    题目: 给你一个字符串数组,请你将 字母异位词 组合在一起.可以按任意顺序返回结果列表. 字母异位词 是由重新排列源单词的字母得到的一个新单词,所有源单词中的字母通常恰好只用一次. 示例 1: 输入: ...

  6. 力扣599(java&python)- 两个列表的最小索引总和(简单)

    题目: 假设 Andy 和 Doris 想在晚餐时选择一家餐厅,并且他们都有一个表示最喜爱餐厅的列表,每个餐厅的名字用字符串表示. 你需要帮助他们用最少的索引和找出他们共同喜爱的餐厅. 如果答案不止一 ...

  7. 力扣467(java)-环绕字符串中唯一的子字符串(中等)

    题目: 把字符串 s 看作是 "abcdefghijklmnopqrstuvwxyz" 的无限环绕字符串,所以 s 看起来是这样的: "...zabcdefghijklm ...

  8. EMAS移动测试-远程真机篇

    简介: 导读:本文将介绍申请远程真机以及在远程真机上执行测试任务的详细操作,包括申请远程真机.安装应用.扫码.定位.性能测试等. 一.移动测试概览 移动测试服务(Mobile Testing)是为企业 ...

  9. iLogtail使用入门-iLogtail本地配置模式部署(For Kafka Flusher)

    ​简介:iLogtail使用入门-iLogtail本地配置模式部署(For Kafka Flusher). 阿里已经正式开源了可观测数据采集器iLogtail.作为阿里内部可观测数据采集的基础设施,i ...

  10. 顺丰科技 Hudi on Flink 实时数仓实践

    ​简介: 介绍了顺丰科技数仓的架构,趟过的一些问题.使用 Hudi 来优化整个 job 状态的实践细节,以及未来的一些规划. 本文作者为刘杰,介绍了顺丰科技数仓的架构,趟过的一些问题.使用 Hudi ...