一、继承性

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. bdtrans 一个命令行下的机器翻译工具

    现如今,机器翻译技术已经越来越成熟了,尽管从整体来看机器翻译的结果还不是特别如意,但是也足以应付一般的翻译需求了.近几年机器翻译平台层出不穷,国外比较出名的翻译平台有Google翻译.必应翻译等,国内 ...

  2. Mongodb操作1-linux安装数据库

    1.下载mongodb 百度云盘连接 :链接:https://pan.baidu.com/s/1b-hTS0XHQKpatecFoumLxw  提取码:z9ax 并送上可视化工具:链接:https:/ ...

  3. poj2396 Budget 上下界可行流

    Budget:http://poj.org/problem?id=2396 题意: 给定一个棋盘,给定每一行每一列的和,还有每个点的性质.求一个合理的棋盘数值放置方式. 思路: 比较经典的网络流模型, ...

  4. 杭电第四场 hdu6336 Problem E. Matrix from Arrays 打表找规律 矩阵前缀和（模板）

    Problem E. Matrix from Arrays Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 262144/262144 ...

  5. U盘便携式hexo&博客搭建&极速纯净低bug主题推荐&部署到coding&SEO优化搜索

    指南:U盘便携式hexo&博客搭建&极速纯净低bug主题推荐&部署到coding&SEO优化搜索   U盘便携式hexo随处写博客 简述:在任意一台联网的电脑上续写he ...

  6. 【Offer】[7] 【重建二叉树】

    题目描述 思路分析 Java代码 代码链接 题目描述 输入某二叉树的前序遍历和中序遍历的结果,请重建出该二叉树.假设输入的前序遍历和中序遍历的结果中都不含重复的数字.例如输入前序遍历序列{1,2,4, ...

  7. 脱离脚手架来配置、学习 webpack4.x （一）基础搭建项目

    序 现在依旧记得第一次看到webpack3.x 版本配置时候的状态  刚开始看到这些真的是一脸懵.希望这篇文章能帮到刚开始入门的同学. webpack 是什么? webpack是一个模块化打包工具,w ...

  8. I don't Blame You that You don't Understand Me

    I don't Blame You that You don't Understand Me Every one has a dead corner in himself, with no entry ...

  9. 【LeetCode】34-在排序数组中查找元素的第一个和最后一个位置

    题目描述 给定一个按照升序排列的整数数组 nums,和一个目标值 target.找出给定目标值在数组中的开始位置和结束位置. 你的算法时间复杂度必须是 O(log n) 级别. 如果数组中不存在目标值 ...

  10. 一次使用scrapy的问题记录

    前景描述: 需要获取某APP的全国订单量,及抢单量.由于没有全国的选项所以只能分别对每一个城市进行订单的遍历.爬虫每天运行一次,一次获取48小时内的订单,从数据库中取出昨天的数据进行对比,有订单被抢则 ...