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. queryset高级用法：select_related

    在提取某个模型的数据的同时,也提前将相关联的数据提取出来.比如提取文章数据,可以使用select_related将author信息提取出来,以后再次使用article.author的时候就不需要再次去 ...

  2. 手写web框架

    重新认识HTTP http请求报文包含三个部分(请求行 + 请求头 + 请求体) 请求行 请求行包含三个内容: method + request-URI + http-version -- 例如 GE ...

  3. DataGear 制作联动异步加载图表的数据可视化看板

    通过DataGear的参数化数据集.图表事件处理和看板API功能,可以很方便地制作联动异步加载图表的数据可视化看板. 首先,新建一个参数化SQL数据集,如下所示: SELECT COL_NAME, - ...

  4. 【Azure 应用服务】如果发现当前使用的订阅无法在China North 3 区中创建App Service服务，如何来解决这个问题呢？

    问题描述 在创建App Service服务时,突然发现无法选择China North 3区域,如何来解决这个问题呢? 问题解答 根据Azure中服务都需要在订阅中注册的原理,因为China North ...

  5. 【Azure Developer】Python代码获取的Token出现'Authentication_MissingOrMalformed'问题

    问题描述 Python 调用Azure AD中所注册的应用生成Token代码: import requests, json client_id = 'yourclientid' client_secr ...

  6. C#多线程(9)：多阶段并行线程

    目录 前言 Barrier 类 属性和方法 示例 新的示例 说明 前言 这一篇,我们将学习用于实现并行任务.使得多个线程有序同步完成多个阶段的任务. 应用场景主要是控制 N 个线程(可随时增加或减少执 ...

  7. centos 8远程分发复制jdk到另一个虚拟机

    在localzly节点操作成功后可以使用远程复制命令将JDK远程复制到slave1节点之中:(此命令在localzly中操作) scp -r /usr/java root@slave1:/usr/ 配 ...

  8. Zabbix“专家坐诊”第198期问答汇总

    问题一 Q:请问一下,自带的思科SNMP交换机模板,怎么不监控down的接口? A1:这种一般在自动发现规则里加个过滤器,过滤出IFSTATUS匹配(1|3)的就能实现只发现up的端口了. A2: 1 ...

  9. vscode 快捷键更换 ctrl + h 全局搜索 改为 f1 - 个人习惯 - 针对某些跨文件函数不能自动跳转

    vscode 快捷键更换 ctrl + h 全局搜索 改为 f1 - 个人习惯 - 针对某些跨文件函数不能自动跳转 原来 f1 换成 ctrl + f1 它一般用 ctrl + shift + p 调 ...

  10. 一次对requirements环境的配置

    事情是这样的,我需要跑通一个代码,因此要配置环境,但是并不能利用requirements中给的指令直接配置,于是开始找一些其他的解决方法.作为一名小白,总是绕很多弯路. 记下一些蜿蜒. 首先,摘录re ...