一、继承性

css中所谓的继承，就是子集继承父级的属性。

可以继承的属性：color、font-xxx、text-xxx、line-xxx。（主要是文本级的标签元素）

但是，像一些盒子元素属性，定位的元素（浮动、绝对定位、固定定位）不能继承。

二、层叠性

层叠性：权重大的标签覆盖了权重小的标签。

权重：谁的权重大，浏览器就显示谁的属性

那到底权重怎么判断呢？

　　首先，看标签有没有被选中，如果都被选中了，比较权重（通过id class 标签的数量），谁的权重大就显示谁的属性；权重一样大，后来者居上。

　　其次，没有选中的标签权重为0，没法跟选中的标签相比。

　　如果标签都没有被选中，谁离得近就显示谁的属性，如果一样近，再比权重。

都被选中比权重

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>流浪者</title>
     <style>
         #box1 #box2 p{
             color: red;
         }
         #box1 .wrap2 p{
             color: yellow;
         }
         div div #box3 p{
             color: green;
         }
         div.wrap1 div.wrap2 div.wrap3 p{
             color: blue;
         }
     </style>

 </head>
 <body>

 <div id='box1' class="wrap1">
     <div id="box2" class="wrap2">
         <div id="box3" class="wrap3">
             <p>猜猜我是什么颜色</p>
         </div>
     </div>
 </div>

 </body>
 </html>

数数的时候，数的是id class 标签 的数量，遵循id>class>标签

都被选中，权重相同

后来者居上。

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>流浪者</title>
     <style>
         #box1 .wrap3 p{
             color: red;
         }
         #box1 .wrap2 p{
             color: yellow;
         }

     </style>

 </head>
 <body>

 <div id='box1' class="wrap1">
     <div id="box2" class="wrap2">
         <div id="box3" class="wrap3">
             <p>猜猜我是什么颜色</p>
         </div>
     </div>
 </div>

 </body>
 </html>

选中的标签永远比没选中的标签权重大

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>流浪者</title>
     <style>
         #box1 #box2 .wrap3{
             color: red;
         }
         #box1 .wrap2 p{
             color: yellow;
         }

     </style>

 </head>
 <body>

 <div id='box1' class="wrap1">
     <div id="box2" class="wrap2">
         <div id="box3" class="wrap3">
             <p>猜猜我是什么颜色</p>
         </div>
     </div>
 </div>

 </body>
 </html>

都是继承来的属性

采用就近原则，谁离预选中标签近，就显示谁的属性。

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>流浪者</title>
     <style>
         #box1 #box2 .wrap3{
             color: red;
         }
         #box1 .wrap2{
             color: yellow;
         }

     </style>

 </head>
 <body>

 <div id='box1' class="wrap1">
     <div id="box2" class="wrap2">
         <div id="box3" class="wrap3">
             <p>猜猜我是什么颜色</p>
         </div>
     </div>
 </div>

 </body>
 </html>

都是继承来的属性，一样近，再比权重

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>流浪者</title>
     <style>
         #box1 #box2 .wrap3{
             color: red;
         }
         #box1 .wrap2 .wrap3{
             color: yellow;
         }

     </style>

 </head>
 <body>

 <div id='box1' class="wrap1">
     <div id="box2" class="wrap2">
         <div id="box3" class="wrap3">
             <p>猜猜我是什么颜色</p>
         </div>
     </div>
 </div>

 </body>
 </html>

!important设置权重为无限大

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>流浪者</title>
     <style>
         #box1 #box2 .wrap3{
             color: red;
         }
         #box1 .wrap2 .wrap3{
             color: yellow !important;
         }

     </style>

 </head>
 <body>

 <div id='box1' class="wrap1">
     <div id="box2" class="wrap2">
         <div id="box3" class="wrap3">
             <p>猜猜我是什么颜色</p>
         </div>
     </div>
 </div>

 </body>
 </html>

作者：流浪者

日期：2019-08-31

03-css的继承性和层叠性的更多相关文章

  1. python 全栈开发，Day47(行级块级标签,高级选择器,属性选择器,伪类选择器,伪元素选择器,css的继承性和层叠性,层叠性权重相同处理,盒模型,padding,border,margin)

    一.HTML中的行级标签和块级标签 块级标签 常见的块级标签:div,p,h1-h6,ul,li,dl,dt,dd 1.独占一行,不和其他元素待在同一行2.能设置宽高3.如果不设置宽高,默认为body ...

  2. 前端----css的继承性和层叠性

    css有两大特性; 继承性和层叠性 继承性 继承:给父级设置一些属性,子级继承了父级的该属性, 这就是我们的css中的继承, 需要注意的是 有一些属性是可以继承下来的: color   ,  font ...

  3. 04.CSS的继承性和层叠性

    CSS有两大特性:  继承性和层叠性 继承性 面向对象语言都会存在继承的概念 , 在面向对象语言中, 继承的特点:  继承了父类的属性和方法.  那么 css  就是在设置属性的 ,  不会牵扯到方法 ...

  4. CSS的继承性和层叠性

    1.继承性 比不是所有的属性都能继承,只有一些文本的属性才能被继承.比如:color,text-开头的,line-开头的,font-开头的.这几种属性才能被继承. 其余的关于盒子,定位,布局的都不能被 ...

  5. CSS样式----CSS的继承性和层叠性（图文详解）

    CSS的继承性 我们来看下面这样的代码,来引入继承性: 上方代码中,我们给div标签增加红色属性,却发现,div里的每一个子标签<p>也增加了红色属性.于是我们得到这样的结论: 有一些属性 ...

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

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

  7. css 两大特性:继承性和层叠性

    css 有两大特性: 继承性和层叠性, 继承性 面向对象语言都会存在继承的概念,在面向对象的语言中,继承的特点:继承了父类的属性和方法.那么我们现在主要研究css,css中没有方法,所以我们仅仅继承属 ...

  8. css 继承性和层叠性

    css有两大特性:继承性和层叠性 继承性 面向对象语言都会存在继承的概念,在面向对象语言中,继承的特点:继承了父类的属性和方法.那么我们现在主要研究css,css就是在设置属性的.不会牵扯到方法的层面 ...

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

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

  10. 前端 CSS 继承性和层叠性

    CSS有两大特性:继承性和层叠性 前端 CSS的继承性 前端 CSS层叠性 CSS选择器优先级 前端 CSS 优先级 样式设置important

随机推荐

  1. Delphi - cxGrid添加Footer显示

    cxGrid - 添加footer显示 1:添加Footer Items 单击cxGrid Customize... ,Summary,Add: 2:添加Footer items数据绑定 选中一条需要 ...

  2. Navicat for mysql建立连接

    1. 安装Navicat for MySQL. 2. 点击连接->MySQL,打开SSH,填写主机名.端口.用户名.密码. 3. 连接->打开常规,设置连接名(可以自由指定).主机名.端口 ...

  3. 2018CCPC 吉林现场赛 赛后总结

    一直以来都没有比赛完写总结的习惯,导致前面几次比赛都没有写过总结. 这是我写的第一场总结把,有时间有想法还记得细节的话再把前面几次比赛的总结给补上把. 热身赛: 热身赛的时候,写的比较急想着快点做出题 ...

  4. 2018中国大学生程序设计竞赛 - 网络选拔赛 hdu Tree and Permutation 找规律+求任意两点的最短路

    Tree and Permutation Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Oth ...

  5. poj 1182 食物链（种类并查集 ‘初心者’）

    题目链接:http://poj.org/problem?id=1182 借着这题可以好好理解一下种类并查集,这题比较简单但挺经典的. 题意就不解释了,中问题. 关于种类并查集结局方法也是挺多的 1扩增 ...

  6. SpringBoot集成Zipkin实现分布式全链路监控

    目录 Zipkin 简介 Springboot 集成 Zipkin 安装启动 zipkin 版本说明 项目结构 工程端口分配 引入 Maven 依赖 配置文件.收集器的设置 编写 Controller ...

  7. Winform应用程序简介

    1.winform应用程序是一种智能客户端技术,我们可以使用winform应用程序帮助我们获得信息或传输信息等. WPF技术——XAML美化界面. 2.  F4快速属性 (1)Name:在后台要获得前 ...

  8. selenium IDE的断言与验证

    断言 验证应用程序的状态是否同所期望的一致.常见的断言包括验证页面内容,如标题是否为X或当前位置是否正确等等 断言被用于4种模式+5种手段: Assert Assert断言失败时,该测试将终止 ver ...

  9. 数据库高级:SQL-CREATE-DATABASE语句

    CREATE DATABASE 语句 CREATE DATABASE 用于创建数据库. SQL CREATE DATABASE 语法 CREATE DATABASE database_name SQL ...

  10. CentOS 7.6安装MySQL 5.7GA版

    环境准备 卸载mariadb rpm -qa | grep mariadb rpm -e --nodeps mariadb-libs-5.5.60-1.el7_5.x86_64 centos7 内部集 ...