认识CSS中css的三大特性：层叠性、继承性以及优先级
前端之HTML、CSS（四）
CSS
CSS三大特性
层叠性：多种样式的叠加，一个属性通过两个选择器设置在同一个元素上，后一个样式会把前一个样式层叠（覆盖）。层叠性的两种情况：第一种样式冲突时，后样式覆盖前样式；第二种样式不冲突时，前后样式互补共同作用同一元素。（冲突：样式属性一样）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>层叠性-测试</title>
<style type="text/css">
p {
color: red;
font-size: 20px;
}
p {
color: blue;
}
</style>
</head>
<body>
<p>层叠性</p>
</body>
</html>
继承性：HTML“晚辈”标签会继承“长辈”标签的某些样式属性。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>继承性-测试</title>
<style type="text/css">
div {
color: red;
}
</style>
</head>
<body>
<div>
<p>继<span>承</span>性</p>
<p><a href="#">继承性</a></p>
</div>
</body>
</html>
注意：不是所有属性都可以继承，一般以text-、font-、line-开头的属性以及color属性可以继承，某些标签也同样不会继承属性。
优先级：CSS三种写入方式：行内样式，内部样式表、外部样式表的优先级关系：行内样式>内部样式表>外部样式表，即一个HTML文档中同时存在三种CSS样式写入，首选行内样式表加载。CSS选择器的三种基本类型：ID选择器、类选择器、标签选择器的优先级关系：ID选择器>类选择器>标签选择器，即三种选择器为同一元素标签设置同一种样式属性，首选ID选择器设置的样式属性。设定ID选择器权值为100，类选择器（伪类选择器）权值为10，标签选择器权值为1，复合选择器中使用的基本选择器组合之间使用加法获取总的权值，权值越高，样式属性选择越优先。如.nav p { }权值为10 + 1 = 11。此外，通配符选择器* { }和继承权值为0，权值相同按照层叠性加载，
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>优先级-测试</title>
<style type="text/css">
#pid {
color: blue; /*ID选择器权值为100*/
}
.priority {
color: green; /*类选择器权值为10*/
}
p {
color: red; /*标签选择器权值为1*/
}
</style>
</head>
<body>
<p class="priority", id="pid">优先级</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>优先级-测试</title>
<style type="text/css">
.complement p {
color: green; /*权值为10 + 1 = 11*/
}
div p {
color: red; /*权值为1 + 1 = 2*/
}
</style>
</head>
<body>
<div class="complement">
<p>复合选择器权值测试</p>
</div>
</body>
</html>
注意：可以在样式属性的属性值后追加！important为某一类型选择器增加权值，增加值为+∞，即追加！impotant的选择器一定优先加载。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>优先级-测试</title>
<style type="text/css">
#pid {
color: blue; /*ID选择器权值为100*/
}
.priority {
color: green; /*类选择器权值为10*/
}
p {
color: red!important; /*标签选择器权值为1*/
}
</style>
</head>
<body>
<p class="priority", id="pid">优先级</p>
</body>
</html>
注意：继承权值为0
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>优先级-测试</title>
<style type="text/css">
.complement {
color: green; /*权值为10*/
}
p {
color: red; /*权值为1*/
}
</style>
</head>
<body>
<div class="complement">
<!-- 父标签权值为10，子标签权值为1，然而继承权值为0，故字体颜色为红色 -->
<p>复合选择器权值测试</p>
</div>
</body>
</html>
权重练习测试
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "
http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta name="keywords" content="关键词1,关键词2,关键词3" />
<meta name="description" content="对网站的描述" />
<title>第1题</title>
<style type="text/css">
#father #son{
color:blue;
}
#father p.c2{
color:black;
}
div.c1 p.c2{
color:red;
}
#father{
color:green !important; /* 继承的权重为0 */
}
</style>
</head>
<body>
<div id="father" class="c1">
<p id="son" class="c2">
试问这行字体是什么颜色的？
</p>
</div>
</body>
</html> <!-- 答案：blue --> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "
http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta name="keywords" content="关键词1,关键词2,关键词3" />
<meta name="description" content="对网站的描述" />
<title>第2题</title>
<style type="text/css">
#father{
color:red;/* 继承的权重为0 */
}
p{
color:blue;
}
</style>
</head>
<body>
<div id="father">
<p>试问这行字体是什么颜色的？</p>
</div>
</body>
</html> <!-- 答案：blue --> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "
http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta name="keywords" content="关键词1,关键词2,关键词3" />
<meta name="description" content="对网站的描述" />
<title>第3题</title>
<style type="text/css">
div p{
color:red;
}
#father{
color:red;
}
p.c2{
color:blue;
}
</style>
</head>
<body>
<div id="father" class="c1">
<p class="c2">
试问这行字体是什么颜色的？
</p>
</div>
</body>
</html> <!-- 答案：blue --> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "
http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta name="keywords" content="关键词1,关键词2,关键词3" />
<meta name="description" content="对网站的描述" />
<title>第4题</title>
<style type="text/css">
div div{
color:blue;
}
div{
color:red;
}
</style>
</head>
<body>
<div>
<div>
<div>
试问这行字体是什么颜色的？
</div>
</div>
</div>
</body>
</html> <!-- 答案：blue --> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>第5题</title>
<style type="text/css">
div div div div div div div div div div div div{
color:red;
}
.me{
color:blue;
}
</style>
</head>
<body>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div class="me">试问这行文字是什么颜色的</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html> <!-- 答案：blue --> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>第6题</title>
<style type="text/css">
.c1 .c2 div{
color: blue;
}
div #box3{
color:green;
}
#box1 div{
color:yellow;
}
</style>
</head>
<body>
<div id="box1" class="c1">
<div id="box2" class="c2">
<div id="box3" class="c3">
文字
</div>
</div>
</div>
</body>
</html> <!-- 答案：yellow -->
认识CSS中css的三大特性：层叠性、继承性以及优先级的更多相关文章
- CSS 三大特性 层叠 继承 优先级
css三大特性 层叠性: 如果一个属性通过两个相同选择器设置到同一个元素上,相同的属性就会出现冲突,那么这个时候一个属性就会将另一个属性层叠掉,采用的是就近原则 继承性: 子标签会继承父标签的某些样式 ...
- java中面向对象的三大特性小结
java中面向对象的三大特性:封装.继承.多态 封装 把抽象的数据和对数据的操作封装在一起,隐藏变量的实现细节.数据被保护在内部,程序的其他部分只有通过被授权的操作(成员方法)才能对数据进行访问. 1 ...
- JavaScript中面向对象的三大特性（一个菜鸟的不正经日常）
经过几天的学习,把jQuery给啃会了,但是运用的还不算特别熟练,总感觉自己在JavaScript方面的基础十分欠缺,所以继续拾起JavaScript,开始更好的编程之旅~ 今天学的是JavaScri ...
- CSS中继承，特殊性，层叠与重要性
继承 CSS的某些样式是具有继承性的,那么什么是继承呢?继承是一种规则,它允许样式不仅应用于某个特定html标签元素,而且应用于其后代.比如下面代码: <html><head> ...
- css的层叠性+继承性+优先级+权重
一.层叠性 1.含义 多种css样式叠加,浏览器处理冲突的能力. 2.原则 1>一般情况下,若出现冲突,会按照css的书写顺序,以最后的样式为准 2>样式不冲突,就不会层叠 二.css的继 ...
- 认识CSS中css引入方式、选择器、文本样式设置以及显示模式
前端之HTML.CSS(三) CSS CSS-Cascading Styles Sheets,层叠样式表.用于网页的表现,主要用于布局和修饰网页. CSS引入方式 CSS的三种引入方式:行内样式,内部 ...
- css中定位功能的特性
它有四大特性,页面找不到盒子的情况 1.z-index值表示谁压着谁,数值大的压盖数值小的 2.只有定位了的元素,才有z-index.也就是说,不管相对定位,绝对定位,固定定位,都可以使用z-inde ...
- css中z-index属性（标签层叠次序）
定义和用法 z-index 属性设置元素的堆叠顺序.拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面. 注释:元素可拥有负的 z-index 属性值. 注释:Z-index 仅能在定位元素上奏 ...
- 认识CSS中css背景样式设置
前端之HTML,CSS(五) CSS CSS背景 CSS可以添加背景颜色和背景图片,也可以对图片进行设置.设置的样式有: background-color 背景颜色 background-image ...
随机推荐
- 使用rpmbuild打包时不对文件进行strip操作
使用rpmbuild打包时不对文件进行strip操作 摘自: https://www.ichenfu.com/2017/11/20/rpmbuild-not-strip/ By Chen Fu 发表于 ...
- Monkey进行压力测试定位问题分析
Monkey测试的log分析,我们可以通过几个关键词来判断测试是否通过. 分析log方法一(粗糙一点): 1)Monkey finished打开LOG,查看log的最下端,是否有类似以下字段:## ...
- App测试从入门到精通之更新测试
我们都知道,app在使用一段时间,都会有更新,而且更新会不止一次.在实际测试中,关于更新的测试场景也是我们需要重点关注的,接下来我们就看一下关于App的更新测试有哪些测试点我们需要注意: APP更新测 ...
- APUE（3）---文件I/O (1)
一.引言 UNIX系统中的大多数文件对I/O只需用到5个函数:open/read/write/lseek和close,这些函数都是不带缓冲I/O(Unbuffered I/O).只要涉及到多个进程间共 ...
- C# int?
int?:表示可空类型,就是一种特殊的值类型,它的值可以为null用于给变量设初值得时候,给变量(int类型)赋值为null,而不是0int??:用于判断并赋值,先判断当前变量是否为null,如果是就 ...
- iOS系统各个版本的占比查询
目的:为了向大多数看齐,我们要实时了解应用系统的使用占比 1.苹果官网查询各个系统的占比: Apple 2.各种设备各种系统的占比 第三方
- 定时器timer类
timer类 Timer(定时器)是Thread的派生类,用于在指定时间后调用一个方法. 构造方法: Timer(interval, function, args=[], kwargs={}) in ...
- 中国移动MIFI--CM510，4G TD-LTE MIFI 上网终端开箱及初步体验@上海
上海的,前期在4G官网报名专页登记了http://www.10086.cn/lte/recruit.html 当时由于报名结束了,所以先注册登记了信息. 1.15号中午收到10086的短信邀请,立马报 ...
- 泛型1(一些algorithm函数)
泛型算法本身不会执行容器的操作,它们只会运行于迭代器之上,执行迭代器的操作.因此算法可能改变容器中保存的元素,也可能在容器内移动元素,但永远不会直接添加或删除元素. 只读算法: accumulate: ...
- SHELL编程之条件判断
一.if 语句结构 (1)单分支语句结构 if 条件测试操作 then 命令序列 fi #!/bin/bash MOUNT_DIR="/media/cdrom/" #-d $M ...