03-css的继承性和层叠性
一、继承性
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的继承性和层叠性的更多相关文章
- python 全栈开发,Day47(行级块级标签,高级选择器,属性选择器,伪类选择器,伪元素选择器,css的继承性和层叠性,层叠性权重相同处理,盒模型,padding,border,margin)
一.HTML中的行级标签和块级标签 块级标签 常见的块级标签:div,p,h1-h6,ul,li,dl,dt,dd 1.独占一行,不和其他元素待在同一行2.能设置宽高3.如果不设置宽高,默认为body ...
- 前端----css的继承性和层叠性
css有两大特性; 继承性和层叠性 继承性 继承:给父级设置一些属性,子级继承了父级的该属性, 这就是我们的css中的继承, 需要注意的是 有一些属性是可以继承下来的: color , font ...
- 04.CSS的继承性和层叠性
CSS有两大特性: 继承性和层叠性 继承性 面向对象语言都会存在继承的概念 , 在面向对象语言中, 继承的特点: 继承了父类的属性和方法. 那么 css 就是在设置属性的 , 不会牵扯到方法 ...
- CSS的继承性和层叠性
1.继承性 比不是所有的属性都能继承,只有一些文本的属性才能被继承.比如:color,text-开头的,line-开头的,font-开头的.这几种属性才能被继承. 其余的关于盒子,定位,布局的都不能被 ...
- CSS样式----CSS的继承性和层叠性(图文详解)
CSS的继承性 我们来看下面这样的代码,来引入继承性: 上方代码中,我们给div标签增加红色属性,却发现,div里的每一个子标签<p>也增加了红色属性.于是我们得到这样的结论: 有一些属性 ...
- 【WEB前端】CSS继承性和层叠性(极度重要)
1.1 继承性 有一些属性,当给自己设置的时候,自己的后代都继承上了,这个就是继承性. 哪些属性能继承? color. text-开头的.line-开头的.font-开头的. 这些关于文字样式的,都能 ...
- css 两大特性:继承性和层叠性
css 有两大特性: 继承性和层叠性, 继承性 面向对象语言都会存在继承的概念,在面向对象的语言中,继承的特点:继承了父类的属性和方法.那么我们现在主要研究css,css中没有方法,所以我们仅仅继承属 ...
- css 继承性和层叠性
css有两大特性:继承性和层叠性 继承性 面向对象语言都会存在继承的概念,在面向对象语言中,继承的特点:继承了父类的属性和方法.那么我们现在主要研究css,css就是在设置属性的.不会牵扯到方法的层面 ...
- CSS(4)---三大特性(继承性,层叠性,优先级)
CSS(4)---三大特性(继承性,层叠性,优先级) CSS有三大特性分别是: 继承性,层叠性,优先级. 一.继承性 概念 给父元素设置一些属性,子元素也可以使用,这个我们就称之为继承性. 注意 1. ...
- 前端 CSS 继承性和层叠性
CSS有两大特性:继承性和层叠性 前端 CSS的继承性 前端 CSS层叠性 CSS选择器优先级 前端 CSS 优先级 样式设置important
随机推荐
- Jmeter 之测试片段、Include Controller、模块控制器应用
一.测试片段是什么? 应用在控制器上的一个特殊线程组,与线程组处于同一层级,必须与Include Controller或模块控制器一起使用才被执行. 二.应用场景 1.当jmeter脚本非常复杂的时候 ...
- 使用docker快速搭建Permeate渗透测试系统实践
一.背景 笔者最近在做一场Web安全培训,其中需要搭建一套安全测试环境:在挑选渗透测试系统的时候发现permeate渗透测试系统比较满足需求,便选择了此系统:为了简化这个步骤,笔者将系统直接封装到了d ...
- B-xor_2019牛客暑期多校训练营(第四场)
题意 给出n个数组(每组数个数不定),m个询问 l, r, x 序号在区间\([l,r]\)的每个数组是否都可以取出任意个数异或出x 题解 判断一个数组能否异或出x,是简单的线性基问题 判断多个线性基 ...
- URAL-1627-Join 生成树计数
传送门:https://vjudge.net/problem/URAL-1627 题意: 给定一个n*m的图,问图中“.”的点生成的最小生成树有多少个. 思路: 生成树的计数,需要用Kirchhoff ...
- Trace 2018徐州icpc网络赛 思维+二分
There's a beach in the first quadrant. And from time to time, there are sea waves. A wave ( xx , yy) ...
- lightoj 1021 - Painful Bases(数位dp+状压)
题目链接:http://www.lightoj.com/volume_showproblem.php?problem=1021 题解:简单的数位dp由于总共就只有16个存储一下状态就行了.求各种进制能 ...
- poj 1511 Invitation Cards(dijstra优化)
题目链接:http://poj.org/problem?id=1511 题意:给出n个点和n条有向边,求所有点到源点1的来回最短路之和(保证每个点都可以往返源点1) 题目比较简单就是边和点的个数有点多 ...
- 结合生活案例实现rabbitmq消息通信
title: 基于springboot实现rabbitmq消息通信 date: 2019-09-11 09:00:30 tags: - [rabbitmq] categories: - [spring ...
- SpringBoot系列__02HelloWorld探究
在前文中,我们创建了一个简单的hello world,现在,利用这个简单的程序,来简单分析一下SpringBoot的启动过程. 如果你是使用过SSM框架的人,尤其是4.0之前的版本,相信你使用过xml ...
- eclipse搭建springmvc
https://www.cnblogs.com/qixing/p/qixing.html