CSS 子节点继承父节点(祖先节点)的样式
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 子节点继承父节点(祖先节点)的样式的更多相关文章
- 剑指Offer(第二版)面试案例:树中两个节点的最低公共祖先节点
(尊重劳动成果,转载请注明出处:http://blog.csdn.net/qq_25827845/article/details/74612786冷血之心的博客) 剑指Offer(第二版)面试案例:树 ...
- QT之setstylesheet防止子窗体继承父窗体样式
/* 1.这里的#号表示,主控件不会影响子控件 2.设置多个样式,可以用双引号和分号 */ ui->groupBox_1->setStyleSheet("#groupBox_1{ ...
- Delphi - 子窗体继承父窗体后如何显示父窗体上的控件
1.创建子窗体Form1 File -> New -> Form,新建一个form,在form的单元文件中修改 2.子窗体中引用父窗体单元 uses TFatherForm 3.将子窗体中 ...
- CSS子元素居中(父元素宽高已知,子元素未知)
<style> .container{width:400px; height:400px; position:relative;} .center{position:absolute; l ...
- Javascript禁止子元素继承父元素的事件
3种方法1.在父元素事件的function中加if(event.target==this){ }2.子元素事件function最后加event.stopPropgation():// 阻止事件冒泡3. ...
- css 子div自适应父div高度
<div class="out"> <div class="a"></div> <div class="b& ...
- CSS子元素在父元素中水平垂直居中的几种方法
1. 水平居中(margin: auto;)子父元素宽度固定,子元素上设置 margin: auto; 子元素不能设置浮动,否则居中失效. #div1{ width: 300px; height: 3 ...
- jQuery如何阻止子元素继承父元素事件?
<a> <b></b> </a> $("a").click(...); 这种绑定的话,b也会响应一次事件,如何只对a元素绑定事件,而 ...
- jquery如何阻止子元素继承父元素的事件(又称事件冒泡)
非常简单,子元素上添加如下代码即可 $('a').click(function(e){ e.stopPropagation(); }); 老版本为event,现在用e就行
随机推荐
- JAVA - 如何判断一个类是无用的类
JAVA - 如何判断一个类是无用的类 方法区主要回收的是无用的类,那么如何判断一个类是无用的类的呢? 判定一个常量是否是"废弃常量"比较简单,而要判定一个类是否是"无用 ...
- CSP J/S 初赛总结
CSP J/S 初赛总结 2021/9/19 19:29 用官方答案估计 J 涂卡的时候唯一的一支 2B 铅笔坏了,只能用笔芯一个个涂 选择 \(-6\ pts\) 判断 \(-3\ pts\) 回答 ...
- LoRa模块无线收发通信技术详解
LoRa是一种LPWAN通信技术,它基于扩频技术而广泛应用于超长距离的无线传输场景中.现在,LoRa主要在全世界433.868.915MHz等自由频带工作.其最大特征是灵敏度高,传输距离长,工作功耗低 ...
- ForEach遍历集合、 集合容器
ForEach遍历集合 foreach循环是一种更加简洁的for循环,也称增强for循环,能用于遍历数组或集合中的元素. 格式: for(容器元素类型 临时变量:容器变量){ 执行语句} 从上面格式可 ...
- 解决Invalid bound statement (not found)的异常
今天在搭建框架的时候,报了一个Invalid bound statement (not found)的异常 经过分析,得出原因: 我的mybatis相关的dao和mapper.xml是通过逆向工程生成 ...
- redis持久化之RDB (七)
一:什么是redis的持久化 Redis 持久化 Redis 提供了不同级别的持久化方式: RDB持久化方式能够在指定的时间间隔能对你的数据进行快照存储. AOF持久化方式记录每次对服务器写的操作,当 ...
- javaweb_Http学习
1. 什么是HTTP? HTTP(超文本传输协议)是一个简单的请求-响应协议,它通常运行在TCP之上. 文本:html,字符串,~... 超文本:图片,音乐,视频,定位,地图..... 默认端口:80 ...
- React技巧之处理tab页关闭事件
原文链接:https://bobbyhadz.com/blog/react-handle-tab-close-event 作者:Borislav Hadzhiev 正文从这开始~ 总览 在React中 ...
- 『现学现忘』Docker基础 — 42、补充:save和load命令说明
目录 1.save命令 2.load命令 1.save命令 将指定的一个或多个镜像保存成.tar格式的文件,进行打包归档. 查看docker save帮助命令,如下: [root@192 ~]# do ...
- 比我的脸还干的gan货——Python Flask Web 框架入门
Flask是一个轻量级的基于Python的web框架. 本文适合有一定HTML.Python.网络基础的同学阅读. 1. 简介 这份文档中的代码使用 Python 3 运行.是的,所以读者需要自己在电 ...