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 选择器继承和层叠的更多相关文章

  1. css选择器---继承,优先级,层叠

    CSS三大特性—— 继承. 优先级和层叠. 继承:即子类元素继承父类的样式; 优先级:是指不同类别样式的权重比较; 层叠:是说当数量相同时,通过层叠(后者覆盖前者)的样式. css选择符分类 首先来看 ...

  2. CSS系列:CSS的继承与层叠特性

    1. CSS的继承特性 所有的CSS语句都是基于各个标记直接的继承关系,CSS继承是指子标记会继承父标记的所有样式风格,并可以再父标记样式风格的基础上再加以修改,产生新的样式,而子标记的样式完全不会影 ...

  3. css的继承和层叠

    标签(空格分隔): css css称为层叠样式表,CSS有两大特性:继承性和层叠性,本章简单介绍一下继承性: 继承性: 定义:继承就是给父及设置了一些属性,子级继承了父及的该属性,这就是我们的css的 ...

  4. css的继承、层叠和特殊性

    1,继承  css的某些样式是具有继承性的,那么什么是继承呢?继承是一种规则,它允许样式不仅应用于某个特定html标签元素,而且应用于其后代. 但注意有一些css样式是不具有继承性的.如border: ...

  5. html学习第二天—— 第九、十章——CSS的继承、层叠和特殊性+CSS格式化排版

    继承CSS的某些样式是具有继承性的,那么什么是继承呢?继承是一种规则,它允许样式不仅应用于某个特定html标签元素,而且应用于其后代.比如下面代码:如某种颜色应用于p标签,这个颜色设置不仅应用p标签, ...

  6. HTML+CSS学习笔记(9)- CSS的继承、层叠和特殊性

    标签:HTML+CSS 继承 CSS的某些样式是具有继承性的,那么什么是继承呢?继承是一种规则,它允许样式不仅应用于某个特定html标签元素,而且应用于其后代.比如下面代码:如某种颜色应用于p标签,这 ...

  7. CSS学习笔记之CSS的继承、层叠和特殊性

    继承 CSS的某些样式是具有继承性的,那么什么是继承呢?继承是一种规则,它允许样式不仅应用于某个特定html标签元素,而且应用于其后代.比如下面代码:如某种颜色应用于p标签,这个颜色设置不仅应用p标签 ...

  8. 从零开始学习html(九)CSS的继承、层叠和特殊性

    一.继承 <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" co ...

  9. CSS选择器与CSS的继承,层叠和特殊性

    什么是选择器?选择器{样式;},在{}之前的部分就是"选择器","选择器"指明了{}中的"样式"的作用对象,也就是"样式" ...

随机推荐

  1. 使用HostAliases 添加pod 的/etc/hosts

    默认的pod 的/etc/hosts 无法自动数据 [root@master1 ~]# kubectl exec smsservice-5c7ff5f74-bc969 -n testihospital ...

  2. linux终端神器kmux

    文章链接 https://www.cnblogs.com/rond/p/4466599.html http://cenalulu.github.io/linux/tmux/ https://www.c ...

  3. 面面俱到的Java接口自动化测试实战

    第1章 接口自动化测试整体认知了解什么是接口和为什么要做接口测试.并且知道接口自动化测试应该学习哪些技术以及接口自动化测试的落地过程. 1-1 导学章节 1-2 什么是接口 1-3 为什么要做接口测试 ...

  4. C++ 函数模板&类模板

    函数模板 #include <iostream> #include <string> using namespace std; template <typename T& ...

  5. 关于for,while,dowhile效率测试

    引言 大家都知道每种循环对应的效率是不同的,书中都说在循环中使用减法的效率是比加法的效率高的,具体情况是怎么样,我们将详细列出各循环的执行效率问题.本文通过查看汇编代码比较各循环的效率以及i++,++ ...

  6. 16-(基础入门篇)GPRS(Air202)关于多个文件中的变量调用和定时器

    https://www.cnblogs.com/yangfengwu/p/9968405.html 因为自己看到好多问多个文件调用的,感觉这个应该说一说 对了大家有没有知道这个是干什么的 大家有没有看 ...

  7. STM32 printf()函数和scanf()函数重定向到串口

    STM32 printf()函数和scanf()函数重定向到串口 printf()函数和scanf()函数重定向 在学习STM32的时候,常常需要用串口来测试代码的正确与否,这时候就要要用到print ...

  8. Luogu4139 上帝与集合的正确用法 拓展欧拉定理

    传送门 题意:求$2^{2^{2^{2^{...}}}} \mod p$的值.$p \leq 10^7$ 最开始想到的是$x \equiv x^2 \mod p$,然后发现不会做... 我们可以想到拓 ...

  9. JS 去除重复元素的方法

    Array.prototype.del = function () { var a = {}, c = [], l = this.length; ; i < l; i++) { var b = ...

  10. JVM调优-GC参数

    一.Throughput收集器(吞吐量)-XX:+UseParallelGC-XX:+UseParallelOldGC *参数调整:通过调整堆大小,减少GC停顿时间,增大吞吐量增强堆大小可以减少Ful ...