CSS 选择器继承和层叠
CSS选择器及其继承特性、层叠特性
1.基本选择器
标记 id class 这个就不再作介绍了
2.复合选择器
交集
交集选择器由两个选择器直接连接构成,其结果是选中二者各自元素范围的交集
其中第一个必须是标记选择器,第二个必须是类别选择器或者ID选择器,须连续书写
如,div.class
并集
并集选择器的结果是同时选中各个基本选择器所选择的范围,任何形式的选择器(包括
标记、类选择器、ID选择器)都可作为并集选择器的一部分,它们之间用逗号相连
如,div,class,h3,#nav
后代
DOM树中鉴于嵌套关系的存在,使用后代选择器可以非常方便的通过组合来给各个元素设置
样式,而不需要给每个元素进行ID或类命名,使命名大大简化,并且条理清晰
各种基本选择器均可自由组合,不受限制
如 div class h3(意思为选中div下class下的h3)
子代
子代选择器与后代的选择器的区别是使用大于号连接
如div>span
注:后代与子代从效果上的区别是,后代选择器产生的影响不仅限于元素的“直接后代”,还影响到它
的“各级后代”;而子代的影响仅限于元素的选中后代本身
3.继承特性
继承特性可一句话概括为子元素拥有父元素的所有CSS属性,哪怕子元素另行设置,那也只是
另行设置覆盖了从父元素继承来的属性值
4.层叠特性
层叠特性可概括为各样式间的优先级顺序
行内样式>ID样式>类别样式>标记样式
打个比方,当前元素设置了以上四种情况上不同的样式,那么最终显示的结果为行内样式的
属性,如此,我们去掉行内样式,依次类推便显示ID、class的样式
CSS 选择器继承和层叠的更多相关文章
- css选择器---继承,优先级,层叠
CSS三大特性—— 继承. 优先级和层叠. 继承:即子类元素继承父类的样式; 优先级:是指不同类别样式的权重比较; 层叠:是说当数量相同时,通过层叠(后者覆盖前者)的样式. css选择符分类 首先来看 ...
- CSS系列:CSS的继承与层叠特性
1. CSS的继承特性 所有的CSS语句都是基于各个标记直接的继承关系,CSS继承是指子标记会继承父标记的所有样式风格,并可以再父标记样式风格的基础上再加以修改,产生新的样式,而子标记的样式完全不会影 ...
- css的继承和层叠
标签(空格分隔): css css称为层叠样式表,CSS有两大特性:继承性和层叠性,本章简单介绍一下继承性: 继承性: 定义:继承就是给父及设置了一些属性,子级继承了父及的该属性,这就是我们的css的 ...
- css的继承、层叠和特殊性
1,继承 css的某些样式是具有继承性的,那么什么是继承呢?继承是一种规则,它允许样式不仅应用于某个特定html标签元素,而且应用于其后代. 但注意有一些css样式是不具有继承性的.如border: ...
- html学习第二天—— 第九、十章——CSS的继承、层叠和特殊性+CSS格式化排版
继承CSS的某些样式是具有继承性的,那么什么是继承呢?继承是一种规则,它允许样式不仅应用于某个特定html标签元素,而且应用于其后代.比如下面代码:如某种颜色应用于p标签,这个颜色设置不仅应用p标签, ...
- HTML+CSS学习笔记(9)- CSS的继承、层叠和特殊性
标签:HTML+CSS 继承 CSS的某些样式是具有继承性的,那么什么是继承呢?继承是一种规则,它允许样式不仅应用于某个特定html标签元素,而且应用于其后代.比如下面代码:如某种颜色应用于p标签,这 ...
- CSS学习笔记之CSS的继承、层叠和特殊性
继承 CSS的某些样式是具有继承性的,那么什么是继承呢?继承是一种规则,它允许样式不仅应用于某个特定html标签元素,而且应用于其后代.比如下面代码:如某种颜色应用于p标签,这个颜色设置不仅应用p标签 ...
- 从零开始学习html(九)CSS的继承、层叠和特殊性
一.继承 <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" co ...
- CSS选择器与CSS的继承,层叠和特殊性
什么是选择器?选择器{样式;},在{}之前的部分就是"选择器","选择器"指明了{}中的"样式"的作用对象,也就是"样式" ...
随机推荐
- 浅谈JEECG多数据源的使用
首先,简单的介绍下什么是JEECG.JEECG(J2EECode Generation)是一款基于代码生成器的免费开源的快速开发平台,使用JEECG可以简单快速地开发出企业级的Web应用系统.JEEC ...
- MariaDB CEO 痛斥云厂商从不回馈社区
导读 MariaDB 首席执行官 Michael Howard 表示,亚马逊和 Oracle 将客户牢牢锁定.他还想知道 AWS 是否可能对 AWS MariaDB 实例动手脚,好让 AWS 自己的数 ...
- linux调度器源码分析 - 初始化(二)
本文为原创,转载请注明:http://www.cnblogs.com/tolimit/ 引言 上期文章linux调度器源码分析 - 概述(一)已经把调度器相关的数据结构介绍了一遍,本篇着重通过代码说明 ...
- 【小程序】模拟数据支持(mockjs配置模拟服务器接口数据)
utils目录 ①下载mockjs(地址)放置utils目录中 ②新建api.js :配置模拟数据以及后台接口,通过DEBUG=ture; //切换数据接口 配置如下: let API_HOST = ...
- Luogu4609 FJOI2016 建筑师 第一类斯特林数
题目传送门 题意:给出$N$个高度从$1$到$N$的建筑,问有多少种从左往右摆放这些建筑的方法,使得从左往右看能看到$A$个建筑,从右往左看能看到$B$个建筑.$N \leq 5 \times 10^ ...
- 《Java程序设计》教学进程
<Java程序设计>教学进程 目录 考核方式 课前准备 教学进程 第00周学习任务和要求 第01周学习任务和要求 第02周学习任务和要求 第03周学习任务和要求 第04周学习任务和要求 第 ...
- WPF模拟探照灯文字
原文:WPF模拟探照灯文字 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/yangyisen0713/article/details/1835936 ...
- Luogu P4427 [BJOI2018]求和
这是一道巨狗题,我已无力吐槽为什么我怎么写都不过 我们对于这种无修改的边权题目有一个经典的树上差分套路: \(ans=sum_x+sum_y-2\cdot sum_{LCA(x,y)}\) 这里的\( ...
- ubuntu12.04安装mininet
网上安装mininet教程有很多,都是通过git命令安装,但有一个坑,安装到./install.sh时会报错,记录下来 1.通过git 下载mininet git clone git://github ...
- Hybrid小程序混合开发之路 - 数据交互
HTML+CSS是历史悠久.超高自由度.控制精准.表现能力极强.编码简单.学习门槛超低.真跨平台的一种UI界面开发方式. 本文介绍的是微信小程序和H5混合开发的一种数据交互方式. 很多应用在原生界面中 ...