6 样式继承

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 
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>css样式继承</title>

    <style>

    .c1{

        color: red;

    }

</style>

</head>

<body>

<div class="c1">

    <div class="c2">item1</div>

    <p>item2</p>

    <div>

        <p>item3</p>

    </div>

</div>

</body>

</html>

执行结果：

6 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. java面向对象之封装-继承-抽象-多态-组合五种概念及用法一网打尽

    说明 曾经在学习java面向对象时,你是否会为面向对象的封装-继承-抽象-多态-组合等各种概念搞得稀里糊涂,乃至反复阅读,背诵其相关概念,结果一段时间过后又还给了时间... 这种经历简直令人发指,让人 ...

  2. 2021-07-20 value!==value，JavaScript中NaN

    关于NaN NaN 属性代表一个"不是数字"的number类型的字面量值.这个特殊的值是因为运算不能执行而导致的,不能执行的原因要么是因为其中的运算对象之一非数字. NaN的出现场 ...

  3. Kotlin 协程二 —— 通道 Channel

    目录 一. Channel 基本使用 1.1 Channel 的概念 1.2 Channel 的简单使用 1.3 Channel 的迭代 1.4 close 关闭 Channel 1.5 Channe ...

  4. 2021 虎符杯hate num 注入题

    前言 今天遇到个有意思的SQL盲注,花了不少功夫,也学到了新姿势,遂记录下来以备后续碰到相同场景使用. 题目 这是2021 虎符杯的一道web题,有一个目标站点且附带了源码. 源码内容包括: 主要逻辑 ...

  5. 吐血分享一套iOS底层面试题，真心想帮你！！！

    一 选择题(单选/多选) 1. 在LP64下,一个指针的有多少个字节 A: 4 B: 8 C: 16 D: 64 答案B解析: 1个指针8字节 2. 一个实例对象的内存结构存在哪些元素 A:成员变量 ...

  6. ABP模块的测试项目从默认的Microsoft SQL Server替换成MySQL

    1.替换项目引用 2.重新生成解决方案 3.删除Migrations 4.模块的引用 替换成:AbpEntityFrameworkCoreMySQLModule 5.命名空间 替换成:Volo.Abp ...

  7. 【Azure 环境】向Azure Key Vault中导入证书有输入密码，那么导出pfx证书的时候，为什么没有密码呢？

    问题描述 将pfx证书导入Key Vault的证书时,这个PFX需要输入正确的密码导入成功.但是当需要导出时,生成的pfx证书则不需要密码.这是正常的情况吗? 问题解答 是的,这是Azure Key ...

  8. UserWarning: To get the last learning rate computed by the scheduler, please use `get_last_lr()`

    将 lr = scheduler.get_lr() 改为 lr = scheduler.get_last_lr()

  9. vagrant 多个box的操作|共享目录失败

    本来机器上已经有一个Ubuntu的box了,今天想在安装一个centos的box,结果还折腾了很长时间. 多个机器的命令 添加box的时候需要使用名称,一个的时候可以忽略名称 vagrant box ...

  10. java项目-尚硅谷项目三员工调度系统

    导入工具类和数据 创建TeamSchedule项目,com.atguigu.team. view,com.atguigu.team.service,com.atguigu.team.domain包 , ...