一、css样式的继承性:

作用：给父元素设置一些属性，子元素也可以使用
应用场景：
一般用于设置网页上的一些共性信息，例如网页的文字颜色，字体，文字大小等内容。优化代码，降低工作量
注意点：
1.并不是所有的属性都可以继承，、
只有color/font-/text-/ line开头的属性才能继承；
2.在css的继承中，不仅仅是儿子可以继承，只要是后代
都能继承
3.继承性中的特殊性
3.1 a标签的文字和颜色 和下划线是不能继承父元素的——举例：
<style type="text/css">

div{

    color:red

   font-size:24px;

    text-decoration: none;

      }

  </style>

 <body>

         < div>

              <h1>我是大标题</h1>

              <a  heref="#">我是超链接</a>

               <p>我是段落</p>

           </div>

 （上面的代码，只有p继承了div设置的属性，而a标签是不能继承父元素的属性,颜色不会变红，下划线也不会被去掉）

3.2 h标签的文字大小也是不能继承父元素的(见上面代码，<h1>标签中我是大标题不会继承<div>的   font-size:24px;属性，所以需要给<h1>单独写个css样式：h1{font-size:24px;}

应用场景：
一般用于设置网页上的一些共性信息，例如网页的文字颜色，
字体，文字大小灯内容
格式：
body{属性：值;}
 
二、层叠性
比如p标签，给p标签设置id和class类名，选择器上选择p 和p的id或者class类名，设置相同的属性，就是层叠性
 
三、优先级：（三一）
作用：当多个选择器（比如选择p标签和p标签里设置的id或者class昵称），选中同一个标签，并且给同一个标签设置相同的属性时，
如何层叠就优先级来确定。
2.优先级判断的三种方式
2.1 是否直接选中，直接选中指的是直接选中要设置css样式的标签，和标签的id或者class类名。（间接选中就是指的是继承性，比如选择<ul>那里面的li继承ul的属性，就称为继承属性）
如果是间接选中，谁离目标标签比较近就听谁的。
2.2是否是相同的选择器。
如果是相同选择器，那么就是谁写在后面就听谁的。（比如给两个p标签设置css样式
p{color:blue}
p{color:red｝
那么就会以第二个p为标准，文字变成红色
 
2.3不同的选择器
如果都是直接选中，并且不是相同类型的选择器，那么就会按照
选择器的优先级来层叠
id>类>标签>通配符>继承>浏览器默认
 
 
权重计算
 
如果选择器里有直接选中和间接选中。哪怕是间接的选择器为id选择器，也会优先实行直接选中的效果

css样式的继承性、层叠性 、优先级的更多相关文章

  1. CSS继承性+层叠性+盒子+浮动

        CSS继承性+层叠性+盒子+浮动 CSS继承性 <style>         div{             color: pink;             font-siz ...

  2. css三大特效之层叠性

    css三大特效之层叠性

  3. 0017 CSS 三大特性：层叠性、继承性、优先级

    目标: 理解 能说出css样式冲突采取的原则 能说出那些常见的样式会有继承 应用 能写出CSS优先级的算法 能会计算常见选择器的叠加值 5.1 CSS层叠性 概念: 所谓层叠性是指多种CSS样式的叠加 ...

  4. python全栈开发 * 继承性 层叠性 盒模型 标准文档流 * 180809

    ---恢复内容开始--- 一继承性 1.继承: 给父级设置一些属性,子级继承了父级的该属性,这就是我们的css中的继承. 2. 可继承: color . font-*(size). text-*(de ...

  5. css样式表和选择器的优先级以及position元素属性值的区别

    css样式表优先级 问题:当同一个HTML元素被不止一个样式定义时,会使用哪个样式呢? 答:一般而言,所有的样式会根据下面的规则层叠于一个新的虚拟样式表中,其中数字4拥有最高的优先权. 1.浏览器缺省 ...

  6. 浏览器如何加载和解析CSS——CSS样式来源与层叠规则

    关于CSS样式首先得理解浏览器如何加载它们,最终的页面样式是如何呈现的? CSS层叠样式表的关键在于"层叠",会根据选择符的使用而将样式相互叠加或者覆盖. CSS样式表之所有有&q ...

  7. CSS(4)---三大特性(继承性，层叠性，优先级)

    CSS(4)---三大特性(继承性,层叠性,优先级) CSS有三大特性分别是: 继承性,层叠性,优先级. 一.继承性 概念 给父元素设置一些属性,子元素也可以使用,这个我们就称之为继承性. 注意 1. ...

  8. 【WEB前端】CSS继承性和层叠性（极度重要）

    1.1 继承性 有一些属性,当给自己设置的时候,自己的后代都继承上了,这个就是继承性. 哪些属性能继承? color. text-开头的.line-开头的.font-开头的. 这些关于文字样式的,都能 ...

  9. 【CSS】我的颜色到底听谁的？—— css的层叠性

    我们之前学了很多个选择器,都可以帮我们定位到具体标签上,然后我们在设置样式.但这也不可避免会产生一个问题:如果多个选择器同时指向同一个标签,那么到底该听谁的??? css一定有自己的机制来处理这个问题 ...

随机推荐

  1. DDD实战进阶第一波(十)：开发一般业务的大健康行业直销系统（实现经销商登录仓储与逻辑）

    上一篇文章主要讲了经销商注册的仓储和领域逻辑的实现,我们先把应用服务协调完成经销商注册这部分暂停一下,后面文章统一讲. 这篇文章主要讲讲经销商登录的仓储和相关逻辑的实现. 在现代应用程序前后端分离的实 ...

  2. python_方法说明

    方法用来描述对象所具有的行为,例如,列表对象的追加元素.插入元素.删除原宿.排序,字符串对象的分隔.连接.排版.替换.烤箱的温度设置.烘烤,等等 在类中定义的方法可以粗略分为四大类:公有方法.私有方法 ...

  3. VS2010+OpenMP的简单使用

    OpenMP是把程序中的循环操作分给电脑的各个CPU处理器并行进行.比如说我要循环运行100次,我的电脑有两个处理器,那OpenMP就会平均分给两个处理器并行运行,每个处理器运行50次.使用方法 1. ...

  4. ubuntu18.04安装安装JDK

    1.前提准备: 下载JDK:http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html 2. ...

  5. Atlas的优缺点及测试结论

    优点 1,实现了读写分离(并通过hint/*master*/可强制走主库,并且加入了权重配置可进行读的负载均衡 2,自身维护了一套连接池,减少了创建连接带来的性能消耗 3,支持DB动态上下线,方便横向 ...

  6. springboot项目利用devtools实现热部署，改动代码自动生效

    一.前言 spring-boot-devtools是一个为开发者服务的一个模块,其中最重要的功能就是自动应用代码更改到最新的App上面去.原理是在发现代码有更改之后,重新启动应用,但是速度比手动停止后 ...

  7. 【转】拍拍网2015年mysql最新开发规范

    1.命名规范 (1)库名.表名.字段名必须使用小写字母,并采用下划线分割. (2)库名.表名.字段名禁止超过32个字符. (3)库名.表名.字段名必须见名知意.命名与业务.产品线等相关联. (4)库名 ...

  8. 并行(Parallelism)与并发(Concurrency)

    并行(Parallelism):多任务在同一时刻运行.例如,多个任务在多核处理器上运行. 并发(Concurrency):两个或者两个以上的任务在一段时间内开始.运行.完成,这意味着它们不是在同一时刻 ...

  9. 【Java入门提高篇】Java集合类详解（一）

    今天来看看Java里的一个大家伙,那就是集合. 集合嘛,就跟它的名字那样,是一群人多势众的家伙,如果你学过高数,没错,就跟里面说的集合是一个概念,就是一堆对象的集合体.集合就是用来存放和管理其他类对象 ...

  10. [ Java面试题 ]多线程篇

    1.什么是线程? 线程是操作系统能够进行运算调度的最小单位,它被包含在进程之中,是进程中的实际运作单位.程序员可以通过它进行多处理器编程,你可以使用多线程对运算密集型任务提速.比如,如果一个线程完成一 ...