一、继承性

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. Fastjson反序列化漏洞概述

    Fastjson反序列化漏洞概述 ​ 背景 在推动Fastjson组件升级的过程中遇到一些问题,为帮助业务同学理解漏洞危害,下文将从整体上对其漏洞原理及利用方式做归纳总结,主要是一些概述性和原理上的东 ...

  2. 持续集成高级篇之Jenkins cli与Jenkins ssh

    系列目录 Jenkins Cli介绍 Jenkins Cli为Jenkins提供的一个cli工具,此工具功能非常强大,可以完成诸如重启jenkins,创建/删除job,查看job控制台输出,添加/删除 ...

  3. 【Leetcode】【简单】【189. 旋转数组】【JavaScript】

    189. 旋转数组 给定一个数组,将数组中的元素向右移动 k 个位置,其中 k 是非负数. 示例 1: 输入: [1,2,3,4,5,6,7] 和 k = 3输出: [5,6,7,1,2,3,4]解释 ...

  4. mysql安装-yum方式

    1.环境 查看当前系统环境,使用的是 centos release 6.5 (Final). 2.检查当前系统是否已经安装过mysql rpm -qa | grep mysql 3.如果有,那么删除已 ...

  5. ImportError: DLL load failed: %1 不是有效的 Win32 应用程序。

    报错 Traceback (most recent call last): File "D:/PyCharm 5.0.3/WorkSpace/2.NLP/2.获取数据源和规范化/4.word ...

  6. CodeForces - 697D - Puzzles DFS

    传送门:D - Puzzles 题意:在一个图中,从1开始dfs,求每一个点到达的期望: 思路:(下面是队长写的) 首先求的是到每一个点的步数的期望. 记fa( u ) = v, son( v )表示 ...

  7. Python学习之旅：使用virtualenv创建Python环境及PyQT5环境配置

    一.写在前面 从学 Python 的第一天起,我就知道了使用 pip 命令来安装包,从学习爬虫到学习 Web 开发,安装的库越来越多,从 requests 到 lxml,从 Django 到 Flas ...

  8. 零基础一年拿下BAT三家offer

    背景 1.本人本科一本双非垫底的那种,硕士211.本硕电子通信,完全0基础,转行一年. 2.研一上第一学期上课+外派到老师合作公司写MATLAB.去年4月开始学习Java. 起步 1.实话说,刚决定转 ...

  9. android 解决 多品牌手机拍照问题,尤其是小米手机

    先上个图吧 .点击头像弹出下面对话框,然后直接上代码. 头像是自定义控件实现的圆形头像,当然就目前而言 想要实现 圆形头像的资料太多了,随便找个就行 <com.kuibu.jucai.widge ...

  10. Net基础篇_学习笔记_第十一天_面向对象（析构函数）

    析构函数与构造函数 析构函数: ~Student() { Console.WriteLine("我是析构函数"); } 析构函数,当程序结束的时候,析构函数才执行. 帮助我们释放资 ...