CSS 有些属性可以让子节点从父节点或祖先节点继承,文本、字体、列表属性等样式都可以被子节点继承。子节点没有自身的样式,子节点将继承父节点或祖先节点的样式。

<ul class="container">
<li class="child-1">child 1</li>
<li class="child-2">
child 2
<ul class="container-2">
<li class="child-a">child A</li>
<li class="child-b">child B</li>
</ul>
</li>
</ul>

设置祖先节点ul的颜色属性color

.container {
color: #7979DE;
}

子节点有自身的样式,不继承父节点的样式:

.container-2 {
color: #00B7FF;
}

页面字体大小、字体颜色都可以设置在最高级节点内(body、html),其所有后代节点都将使用祖先节点的样式,省去了每一次都要设置字体样式等。

CSS 子节点继承父节点(祖先节点)的样式的更多相关文章

  1. 剑指Offer(第二版)面试案例:树中两个节点的最低公共祖先节点

    (尊重劳动成果,转载请注明出处:http://blog.csdn.net/qq_25827845/article/details/74612786冷血之心的博客) 剑指Offer(第二版)面试案例:树 ...

  2. QT之setstylesheet防止子窗体继承父窗体样式

    /* 1.这里的#号表示,主控件不会影响子控件 2.设置多个样式,可以用双引号和分号 */ ui->groupBox_1->setStyleSheet("#groupBox_1{ ...

  3. Delphi - 子窗体继承父窗体后如何显示父窗体上的控件

    1.创建子窗体Form1 File -> New -> Form,新建一个form,在form的单元文件中修改 2.子窗体中引用父窗体单元 uses TFatherForm 3.将子窗体中 ...

  4. CSS子元素居中(父元素宽高已知,子元素未知)

    <style> .container{width:400px; height:400px; position:relative;} .center{position:absolute; l ...

  5. Javascript禁止子元素继承父元素的事件

    3种方法1.在父元素事件的function中加if(event.target==this){ }2.子元素事件function最后加event.stopPropgation():// 阻止事件冒泡3. ...

  6. css 子div自适应父div高度

    <div class="out"> <div class="a"></div> <div class="b& ...

  7. CSS子元素在父元素中水平垂直居中的几种方法

    1. 水平居中(margin: auto;)子父元素宽度固定,子元素上设置 margin: auto; 子元素不能设置浮动,否则居中失效. #div1{ width: 300px; height: 3 ...

  8. jQuery如何阻止子元素继承父元素事件?

    <a> <b></b> </a> $("a").click(...); 这种绑定的话,b也会响应一次事件,如何只对a元素绑定事件,而 ...

  9. jquery如何阻止子元素继承父元素的事件(又称事件冒泡)

    非常简单,子元素上添加如下代码即可 $('a').click(function(e){ e.stopPropagation(); }); 老版本为event,现在用e就行

随机推荐

  1. GO GMP协程调度实现原理 5w字长文史上最全

    1 Runtime简介 Go语言是互联网时代的C,因为其语法简洁易学,对高并发拥有语言级别的亲和性.而且不同于虚拟机的方案.Go通过在编译时嵌入平台相关的系统指令可直接编译为对应平台的机器码,同时嵌入 ...

  2. CentOS8安装mysql8.0具体步骤

    操作系统:CentOS Linux release 8.0及以上 Mysql版本:Mysql 8.0.22 x86_64 (MySQL Community Server - GPL) Mysql8下载 ...

  3. python 的 @staticmethod和@classmethod和普通实例方法

    参考:https://www.huaweicloud.com/articles/12607084.html https://blog.csdn.net/qq_30708445/article/deta ...

  4. CentOS切换用户命令su or su+username

    1.打开终端,提示符为"$",表明该用户为普通用户,此时,直接输su,回车,输入root密码,回车,就可以切换到root用户下,此时的提示符变为"#". 注意, ...

  5. client offset scroll 之间的区别

    一.client 属性 值 clientWidth 元素被设置的宽度 + padding左右内间距 clientHeight 元素被设置的高度 + padding上下内间距 clientLeft 左 ...

  6. 覆盖率检查工具:JaCoCo 食用指南

    一:概述 众所周知,软件的代码覆盖率是衡量软件质量的重要指标, 我们今天简单介绍 JaCoCo 的实际使用示例,它是目前在大多数 Java 项目中应用最广泛的覆盖率检测框架 更多资料参考:JaCoCo ...

  7. WPF开发随笔收录-自定义图标控件

    一.前言 1.在以前自学的过程中,软件需要使用到图标的时候,总是第一个想法是下载一个图片来充当图标使用,但实际得出来的效果会出现模糊的现象.后来网上学习了字体图标库的用法,可以在阿里云矢量图网站那里将 ...

  8. RabbitMD大揭秘

    RabbitMD大揭秘 欢迎关注H寻梦人公众号 通过SpringBoot整合RabbitMQ的案例来说明,RabbitMQ相关的各个属性以及使用方式:并通过相关源码深刻理解. Queue(消息队列) ...

  9. 关于Thymeleaf无法取值问题

    SpringBoot2.7以前的版本在获取model中数据的时候不需要注释,2.7以后的版本需要加注释,它无法直接取存在model中的数据,不加注释的时候会爆红但是可以正常使用,这个注释的含义就是指定 ...

  10. Solution -「HDU」Professor Ben

    Description 有 \(Q\) 个询问.每次给定一个正整数 \(n\),求它的所有因数的质因数个数的和. Solution 就讲中间的一个 Trick. 我们定义正整数 \(x\) 有 \(f ...