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. Vulhub靶场搭建教程

    Vulhub靶机环境搭建 Vulhub地址: Vulhub下载地址 一.所需环境 1.Ubuntu16.04 2.最新版本Docker 二.安装之路 1.下载Ubuntu16.04下载地址(迅雷下载6 ...

  2. App自动化之dom结构和元素定位方式(包含滑动列表定位)

    900×383 38 KB 先来看几个名词和解释: dom: Document Object Model 文档对象模型 dom应用: 最早应用于html和js的交互.界面的结构化描述, 常见的格式为h ...

  3. spring boot用ide新建项目遇到的restcontroller不能导入的问题

    才开始学习spring boot,第一个程序helloworld就碰到@RestController和@RequestMapping(/hello)的注解都会报错的问题. 我个人的解决方法: 1.sp ...

  4. Redis 切片集群的数据倾斜分析

    Redis 中如何应对数据倾斜 什么是数据倾斜 数据量倾斜 bigkey导致倾斜 Slot分配不均衡导致倾斜 Hash Tag导致倾斜 数据访问倾斜 如何发现 Hot Key Hot Key 如何解决 ...

  5. Vue2自定义插件的写法-Vue.use()

    最近在用vue2完善一个项目,顺便温习下vue2的基础知识点! 有些知识点恰好没用到时间一长就会淡忘,这样对自己是一种损失. 定义一个对象 对象里可以有任何内容 但install的函数是必不可少的,因 ...

  6. java web 三层架构设计

    界面层(表示层):用户看得到的,可以通过此与服务器交互 业务逻辑层:处理业务逻辑. 数据访问层:操作数据存储文件

  7. centos 7安装gitlab及使用

    GitLab 概述: 是一个利用 Ruby on Rails 开发的开源应用程序,实现一个自托管的 Git 项目仓库,可通过 Web界面迚行访问公开的戒者私人项目.Ruby on Rails 是一个可 ...

  8. openGauss内核:SQL解析过程分析

    摘要:在传统数据库中SQL引擎一般指对用户输入的SQL语句进行解析.优化的软件模块.SQL的解析过程主要分为:词法.语法和语义分析. 本文分享自华为云社区< openGauss内核分析(三):S ...

  9. NC14893 栈和排序

    NC14893 栈和排序 题目 题目描述 给你一个1->n的排列和一个栈,入栈顺序给定 你要在不打乱入栈顺序的情况下,对数组进行从大到小排序 当无法完全排序时,请输出字典序最大的出栈序列 输入描 ...

  10. 重磅硬核 | 一文聊透对象在 JVM 中的内存布局,以及内存对齐和压缩指针的原理及应用

    欢迎关注公众号:bin的技术小屋 大家好,我是bin,又到了每周我们见面的时刻了,我的公众号在1月10号那天发布了第一篇文章<从内核角度看IO模型的演变>,在这篇文章中我们通过图解的方式以 ...