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就行
随机推荐
- Citrix Virtual Apps and Desktops 7 2203 LTSR虚拟云桌面单机教程
哈喽大家好,欢迎来到虚拟化时代君(XNHCYL). 大家好,我是虚拟化时代君,一位潜心于互联网的技术宅男.这里每天为你分享各种你感兴趣的技术.教程.软件.资源.福利--(每天更新不间断) 一 .主要内 ...
- 互联网大厂目标管理OKR实践落地与反思
上一篇「 互联网公司目标管理OKR和绩效考核的误区 」介绍了使用 OKR 时要澄清的一些概念,但是实际使用中又如何呢?我们快手也是很大的互联网公司,大家都是年轻人,思维活跃,容易接受新事物,敢尝试,但 ...
- 10.Linux防火墙iptables之SNAT与DNAT
Linux防火墙iptables之SNAT与DNAT 目录 Linux防火墙iptables之SNAT与DNAT SNAT策略及应用 SNAT策略概述 SNAT策略典型应用环境 SNAT策略原理 SN ...
- VueX的模块你知道多少?
为什么会出现VueX的模块呢?当你的项目中代码变多的时候,很难区分维护.那么这时候Vuex的模块功能就这么体现出来了. 那么我们就开始吧!一.模块是啥? /* eslint-disable no-un ...
- SAP 实例 13 Random Grouping with LOOP
REPORT demo_loop_group_by_random. CLASS demo DEFINITION. PUBLIC SECTION. CLASS-METHODS: main, class_ ...
- 隐私计算FATE-离线预测
一.说明 Fate 的模型预测有 离线预测 和 在线预测 两种方式,两者的效果是一样的,主要是使用方式.适用场景.高可用.性能等方面有很大差别:本文分享使用 Fate 基于 纵向逻辑回归 算法训练出来 ...
- Host–Parasite(主从关系): Graph LSTM-in-LSTM for Group Activity Recognition
This article aims to tackle the problem of group activity recognition in the multiple-person scene. ...
- 腾讯云EKS 上部署 eshopondapr
腾讯云容器服务(Tencent Kubernetes Engine,TKE)基于原生 kubernetes 提供以容器为核心的.高度可扩展的高性能容器管理服务.腾讯云容器服务完全兼容原生 kubern ...
- 提名 Apache ShardingSphere Committer,说说方法
文章首发在公众号(龙台的技术笔记),之后同步到博客园和个人网站:xiaomage.info 就在前几天,收到了 Apache ShardingSphere Vote 我成为 Committer 的邮件 ...
- NFS配置-实现多服务器共享目录
NFS网络文件系统 为什么要用NFS? 前端所有的应用服务器接收到用户上传的图片.文件.视频,都会统一放到后端的存储上.共享存储的好处:方便数据的查找与取出,缺点:存储服务器压力大,坏了丢失全部数据. ...