一、继承性

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. linux 网络基础之IP地址

    IP是英文Internet Protocol的缩写,意思是“网络之间互连的协议”,也就是为计算机网络相互连接进行通信而设计的协议. IP地址类型分为:公有地址.私有地址. 公有地址 公有地址(Publ ...

  2. JavaScript 数据结构与算法之美 - 桶排序、计数排序、基数排序

    1. 前言 算法为王. 想学好前端,先练好内功,只有内功深厚者,前端之路才会走得更远. 笔者写的 JavaScript 数据结构与算法之美 系列用的语言是 JavaScript ,旨在入门数据结构与算 ...

  3. Android Studio安卓学习笔记(一)安卓与Android Studio运行第一个项目

    一:什么是安卓 1.Android是一种基于Linux的自由及开放源代码的操作系统. 2.Android操作系统最初由AndyRubin开发,主要支持手机. 3.Android一词的本义指“机器人”, ...

  4. Linux配置使用SSH Key登录并禁用root密码登录

    Linux系统大多数都支持OpenSSH,生成公钥.私钥的最好用ssh-keygen命令,如果用putty自带的PUTTYGEN.EXE生成会不兼容OpenSSH,从而会导致登录时出现server r ...

  5. EOJ 2019.2月赛 D. 进制转换

    https://acm.ecnu.edu.cn/contest/140/problem/D/ 题意 求一个区间L,R中,在K进制表示下末尾恰有m个0的数字个数. 思路 末尾有m个0,就表示的是K^m的 ...

  6. 2019 Multi-University Training Contest 3

    B.Blow up the city solved by F0_0H 210min 题意 给一个DAG,每次询问给定u,v,求使得u或v不能与中心点联通的关键点个数 做法 按照拓扑序建树 新加节点的父 ...

  7. codeforces 389 D. Fox and Minimal path（构造+思维）

    题目链接:https://vjudge.net/contest/175446#problem/J 题解:显然要用最多n个点构成的图要使的得到的最短路条数有1e9次个,显然要有几个数相乘容易想到2的几进 ...

  8. codeforces 828 D. High Load（思维，水题）

    题目链接:http://codeforces.com/contest/828/problem/D 题解:任意去一个点为根然后有几个k就是几个子叶也就是根结点有几个分支然后最好的解法就是贪心,将剩下的点 ...

  9. 工作中遇到的99%SQL优化，这里都能给你解决方案(三)

    -- 示例表 CREATE TABLE `employees` ( `id` int(11) NOT NULL AUTO_INCREMENT, `name` varchar(24) NOT NULL ...

  10. JS数组方法整理（附使用示例）

    整理目前所用过的数组方法,学习了新增的es6方法. 1.arr.push() 从后面添加元素,返回值为添加完后的数组的长度 let arr = [1,2, is 8.3,4,5] console.lo ...