三大特性(继承性,层叠性,优先级)

CSS有三大特性分别是: 继承性层叠性优先级

一、继承性

概念 给父元素设置一些属性,子元素也可以使用,这个我们就称之为继承性。

注意

1.并不是所有的属性都可以继承, 只有以color/font-/text-/line-开头的属性才可以继承
2.在CSS的继承中不仅仅是儿子可以继承, 只要是后代都可以继承
3.继承性中的特殊性
3.1 a标签的文字颜色和下划线是不能继承的
3.2 h标签的文字大小是不能继承的

示例

<!-- 样式部分 -->
<style type="text/css">
.father {
width: 300px; /*设置宽度*/
font-size: 20px; /* 设置字体*/
text-align: right; /* 字体右对齐*/
background-color: green; /*背景颜色绿色*/
color:red; /*字体颜色红色*/
}
</style> <!-- html部分 -->
<body>
<div class="father">father标签
<p>father子标签 p</p>
</div>
</body>

运行结果

从这个例子中可以看出子标签p继承了父类div的样式。

二、层叠性

概念 层叠性就是CSS处理冲突的一种能力。层叠性只有在多个选择器选中 同一个标签, 然后又设置了相同的属性, 才会发生层叠性。

示例

<html>
<head>
<title>CSS三大特性之层叠性</title>
<style>
p {
color: red;
}
p {
color: blue;
}
</style>
</head>
<body>
<p style="color: black">我是段落</p> <!-- 最终显示black 就近原则 black > blue > red -->
</body>
</html>

在相同优先级的的情况下 下面的样式元素会将上面的层叠掉。

三、CSS优先级

概念 当多个选择器选中同一个标签, 并且给同一个标签设置相同的属性时, 如何层叠就由优先级来确定。

优先级

!important>行内样式>id选择器>类选择器>标签选择器>通配符>继承

补充说明

1、继承样式的权重为0。即在嵌套结构中,不管父元素样式的权重多大,被子元素继承时,他的权重都为0,也就是说子元素定义的样式会覆盖继承来的样式。
2、行内样式优先。应用style属性的元素,其行内样式的权重非常高,可以理解为远大于100。
3、权重相同时,CSS遵循就近原则。也就是说靠近元素的样式具有最大的优先级,或者说排在最后的样式优先级最大。
4、CSS定义了一个!important命令,该命令被赋予最大的优先级。也就是说不管权重如何以及样式位置的远近,!important都具有最大优先级。

关于CSS权重,有一套计算公式来去计算,用一个四位的数 字串(CSS2是三位)来表示,更像四个级别,值从左到右,左面的最大,一级大于一级,数位之间没有进制,级别之间不可超越。

部分权重是可以叠加的。比如的例子:

div ul  li   ------>      0,0,0,3
a:hover -----—> 0,0,1,1
.son ul li ------> 0,0,1,2
.son a ------> 0,0,1,1
#son p ------> 0,1,0,1

注意

对于并集选择器来说不是权重的加和,因为理论上它还是独立的,它只相当于将多个选择器的相同内容归于一个并集选择器中,理论上每一个选择器还是独立的。

示例

<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
div,p {
color: green; /*这里不能是0,0,0,2 而是两个0,0,0,1*/
} p {
color: red; /*对于p标签最终会显示红色 0,0,0,1 (因为和上面优先级一样,所以下面会覆盖上面样式)*/
}
</style>
</head>
<body>
<p>标签什么颜色</p>
</body>
</html>

四、经典测试题

这里举几个测试题来巩固下css优先级的知识。首先我们要知道如何推断标签的最终样式

1. 先找到影响文字的最里面的盒子
2. 然后计算权重
3. 如果权重一样,看层叠性

1、第一题

<!DOCTYPE>
<html>
<head>
<title>第2题</title>
<style type="text/css">
#father{
color:red; /* 继承的权重为 0,0,0,0 */
}
p{
color:blue; /* 权重 0,0,0,1 */
}
</style>
</head>
<body>
<div id="father">
<p>试问这行字体是什么颜色的?</p>
</div>
</body>
</html>

答案 蓝色。

2、第二题

<!DOCTYPE>
<html>
<head>
<title>第1题</title>
<style type="text/css">
#father #son{ /*权重: 0,2,0,0 */
color:blue;
}
#father p.c2{ /* 权重: 0,1,1,1 */
color:black;
}
div.c1 p.c2{ /* 权重 0,0,2,2 */
color:red;
}
#father{
color:green !important; /* 继承的权重为 0,0,0,0 */
}
</style>
</head>
<body>
<div id="father" class="c1">
<p id="son" class="c2">
试问这行字体是什么颜色的?
</p>
</div>
</body>
</html>

答案 蓝色。

3、第三题

<!DOCTYPE>
<html>
<head>
<title>Document</title>
<style type="text/css">
div div div div div div div div div div div div{ /* 权重 0,0,0,11 (最后一位数再怎么相加都不会向前进一位) */
color:red;
}
.me{
color:blue; /* 权重 0,0,1,0 */
}
</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>

答案 蓝色。

4、第四题

<!DOCTYPE>
<html>
<head>
<title>第四题</title>
<style type="text/css">
.c1 .c2 div{ /* 权重 0,0,2,1 */
color: blue;
}
div #box3{ /* 权重 0,1,0,1 */
color:green;
}
#box1 div{ /* 权重 0,1,0,1 */
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>

答案 黄色 (如果权重一样,看层叠性)

```
你如果愿意有所作为,就必须有始有终。(6)
```

CSS(4)---三大特性(继承性,层叠性,优先级)的更多相关文章

  1. 认识CSS中css的三大特性:层叠性、继承性以及优先级

    前端之HTML.CSS(四) CSS CSS三大特性 层叠性:多种样式的叠加,一个属性通过两个选择器设置在同一个元素上,后一个样式会把前一个样式层叠(覆盖).层叠性的两种情况:第一种样式冲突时,后样式 ...

  2. H5 25-CSS三大特性之层叠性

    25-CSS三大特性之层叠性 我是段落 <!DOCTYPE html> <html lang="en"> <head> <meta cha ...

  3. 0017 CSS 三大特性:层叠性、继承性、优先级

    目标: 理解 能说出css样式冲突采取的原则 能说出那些常见的样式会有继承 应用 能写出CSS优先级的算法 能会计算常见选择器的叠加值 5.1 CSS层叠性 概念: 所谓层叠性是指多种CSS样式的叠加 ...

  4. CSS的三大特性(继承、层叠和优先级)

    CSS的三大特性(继承.层叠和优先级) 1.css属性的继承 CSS中有些属性是可继承的,何为属性的继承? 一个元素如果没有设置某些属性的值,就会跟随(继承)父元素的属性值.当然,一个元素如果有设置自 ...

  5. CSS继承性+层叠性+盒子+浮动

        CSS继承性+层叠性+盒子+浮动 CSS继承性 <style>         div{             color: pink;             font-siz ...

  6. Javascript面向对象三大特性(封装性、继承性、多态性)详解及创建对象的各种方法

    Javascript基于对象的三大特征和C++,Java面向对象的三大特征一样,都是封装(encapsulation).继承(inheritance )和多态(polymorphism ).只不过实现 ...

  7. css三大特效之层叠性

    css三大特效之层叠性

  8. CSS三大特性(继承、优先级、层叠)之个人见解

    首先声明一下CSS三大特性——继承.优先级和层叠.继承即子类元素继承父类的样式,比如font-size,font-weight等f开头的css样式以及text-align,text-indent等t开 ...

  9. css 两大特性:继承性和层叠性

    css 有两大特性: 继承性和层叠性, 继承性 面向对象语言都会存在继承的概念,在面向对象的语言中,继承的特点:继承了父类的属性和方法.那么我们现在主要研究css,css中没有方法,所以我们仅仅继承属 ...

随机推荐

  1. 从零开始的vue学习笔记(七)

    前言 今天花一天时间阅读完vuex的官方文档,简单的做一下总结和记录 Vuex是什么 Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式,以前的符合"单向数据流"理念的 ...

  2. 杂谈:开发人员如何进行复杂业务的学习?让boss刮目相看

    一点小拙见,欢迎指正 一.概述 大型复杂的软件系统,是有许多人共同协作完成的,有些产品的业务是很复杂的,其在需求文档,及开发规范上都做得很好,不然维护的人越多,没有文档和规范去限制,岂不更加乱套. 如 ...

  3. 04-04 AdaBoost算法代码(鸢尾花分类)

    目录 AdaBoost算法代码(鸢尾花分类) 一.导入模块 二.导入数据 三.构造决策边界 四.训练模型 4.1 训练模型(n_e=10, l_r=0.8) 4.2 可视化 4.3 训练模型(n_es ...

  4. Python3程序设计指南:01 过程型程序设计快速入门

    大家好,从本文开始将逐渐更新Python教程指南系列,为什么叫指南呢?因为本系列是参考<Python3程序设计指南>,也是作者的学习笔记,希望与读者共同学习. .py文件中的每个估计都是顺 ...

  5. 两种高效的事件处理模型:Reactor模式和Proactor模式

    随着IO多路复用技术的出现,出现了很多事件处理模式.同步I/O模型通常由Reactor模式实现,而异步I/O模型则由Proactor模式实现. Reactor模式: Reator类图如上所示,Reac ...

  6. Redis实现分布式文件夹锁

    缘起 最近做一个项目,类似某度云盘,另外附加定制功能,本人负责云盘相关功能实现,这个项目跟云盘不同的是,以项目为分配权限的单位,同一个项目及子目录所有有权限的用户可以同时操作所有文件,这样就很容易出现 ...

  7. 算法学习之剑指offer(十一)

    一 题目描述 请实现一个函数按照之字形打印二叉树,即第一行按照从左到右的顺序打印,第二层按照从右至左的顺序打印,第三行按照从左到右的顺序打印,其他行以此类推. import java.util.*; ...

  8. c++11::std::decltype/declval

    decltype ( 实体 ) () (C++ 起) decltype ( 表达式 ) () (C++ 起) 若实参是其他类型为 T 的任何表达式,且 a) 若 表达式 的值类别为亡值,则 declt ...

  9. 异步IO实例

    #include <stdio.h> #include <stdlib.h> #include <errno.h> #include <string.h> ...

  10. python 可变数量参数 ( 多参数返回求 参数个数,最大值,最大值)

    一. 自定义一串数字求 参数个数,最大值,最大值()---------方法一: def max(*a): m=a[0] p=a[0] n=0 for x in a: if x>m: m=x n+ ...