CSS中层叠和继承的概念。
继承
CSS的某些样式是具有继承性的，那么什么是继承呢？继承是一种规则，它允许样式不仅应用于某个特定html标签元素，而且应用于其后代。比如下面代码：
|
1
2
3
4
5
6
7
8
9
|
<html><br><head><style>p{border:1px solid red}</style></head><body><p>123<span>123</span>123</p></body></html> |
如某种颜色应用于p标签，这个颜色设置不仅应用p标签，还应用于p标签中的所有子元素文本，这里子元素为span标签。
在上面的例子中，span标签没有用处，p标签起到了设置了边框为1像素，实心边框线。
特殊性
有的时候我们为同一个元素设置了不同的CSS样式代码，那么元素会启用哪一个CSS样式呢？
想要理解这个概念，就要先理解权值这个概念。
在百度百科中对于权值的概念是这样的：在数学领域，权值指加权平均数中的每个数的频数，也称为权数或权重。计算机领域中（数据结构）权值就是定义的路径上面的值。可以这样理解为结点间的距离。通常指字符对应的二进制编码出现的概率。
|
1
2
3
4
5
6
7
8
9
10
11
|
<html><head><style>p{color:red}.first{color:green}</style></head><body><p class="first">123</p></body></html> |
在CSS中，权值是这样的：标签的权值为1，类选择符的权值10，ID选择符的权值为100。
层叠
如果在html文件中对于同一个元素可以有多个CSS样式存在并且这多个CSS样式具有相同权值怎么办？
这就是层叠，如下列代码：
|
1
2
3
4
5
6
7
8
9
10
11
|
<html><head><style>p{color:red}p{color:green}</style></head><body><p>123</p></body></html> |
最后p中的文本会设置成green，层叠很好理解。
选择器的优先级：
| 嵌入 | id | class | 元素 | |
|---|---|---|---|---|
| a | b | c | d | |
| style | 1 | 0 | 0 | 0 |
| id | 0 | 1 | 0 | 0 |
| class，属性，伪类 | 0 | 0 | 1 | 0 |
| 元素，伪元素 | 0 | 0 | 0 | 1 |
| 通配符 | 0 | 0 | 0 | 0 |
| ！important | 最高 | 最高 | 最高 | 最高 |
重要性
当我们在做网页代码时，有些特殊的情况需要为某些样式设置具有最高权值，怎么办？这时我们可以使用！important来解决
如下代码：
|
1
2
3
4
5
6
7
8
9
10
11
|
<html><head><style>p{color:red!important;}p{color:green}</style></head><body><p>123</p></body></html> |
这时p的颜色为红色。
CSS中层叠和继承的概念。的更多相关文章
- 关于css中层叠性的一点理解
关于css层叠性的一点理解 标签(空格分隔): html css 我们平时在写css的时候会遇到这样的情况 <!DOCTYPE html> <html lang="en&q ...
- CSS中inherit指定继承的使用方法和auto的区别
CSS中的每个属性都有一个特定值"inherit",其含义是指定继承父元素的相应属性,使用inherit一方面在代码上能地表明要继承于父元素的样式属性,另一方面也使子元素继承了那些 ...
- CSS中那些必须掌握的概念
一.盒子模型 1.什么是盒子模型 css盒模型本质上是一个盒子,封装周围的html元素,它包括:外边距(margin).边框(border).内边距(padding).实际内容(content)四个属 ...
- CSS基础-层叠与继承
继承 一些属性可以被继承,一些不可以. 一般来说,字体颜色.字体大小会被继承,关于形状的如 padding .border .margin.width等就不会被继承.哪些属性属于默认继承很大程度上是由 ...
- css中属性值继承小解
继承:html元素可以从父元素那里继承一部分css属性,即使当前元素没有定义该属性. 1.css可以和不可以继承的属性 不可继承的:display.margin.border.padding.back ...
- Css中的两个重要概念：块状元素和内联元素
一.display:block display:block就是将元素显示为块级元素,一般是其他元素的容器,可容纳内联元素和其他块状元素,块状元素排斥其他元素与其位于同一行,宽度(width)高度(he ...
- CSS中层叠和CSS的7阶层叠水平（上篇）
今天搜索资料时,忽然发现了以前没注意的一个知识点,所以拖过来搞一搞,这个知识点叫做CSS的7阶层叠水平 在说这个知识之前,我们必须要先了解一个东西以便于我们更好的理解CSS的7阶层叠水平 这个东西就是 ...
- javascript中对象函数继承的概念
什么是函数对象?这个对象既是通常意义上的对象,又可以加上括号直接执行的函数. 产生函数对象的方式有两种:1.通过function关键字产生:var fn = function(){};2.实例化Fun ...
- css中权重与继承
出处:http://blog.csdn.net/xf616510229/article/details/53613212
随机推荐
- pycharm查看函数用法，参数信息的设置方法
在编写python程序时,常常会遇到一些不太常见的函数,有时候又不想去百度,那么,使用pycharm设置快速显示函数的参数和用法,这个方法十分快捷方便. step1. file -> setti ...
- Java 入土之路
概述 变量与数据类型 运算符与方法 面向对象 异常处理 包装类与常量池 集合框架 多线程 网络通讯协议 socket 编程-概念未发布 socket 编程-java环境未发布 web入门 Servle ...
- 为什么学习Python？
互联网高速发展的今天,很荣幸能够接触计算机这个专业,成为一名程序猿小白,本科期间学习了C.C++.Java.Pthon.C#,每门语言都了解那么一点,学的很杂,刚好遇到大学毕业的这个暑期,在继续读研之 ...
- 基于Maven 的 Spring MVC
Spring MVC 他是基于MVC的设计模式做出来的,他是Spring对Servlet的进一步的封装 MVC:Model View Controller 如何使用Spring MVC?(Spri ...
- Java EE 基本开发流程及数据库连接池 Druid
一. 公司开发基本流程 a. 了解需求信息(比较模糊) 需求,不是别人告诉你的,是你自己挖掘出来的. 售前工程师(对行业知识了解):编程学不好,但懂点代码,对人的综合 ...
- bootstrap-table 常用总结-树形结构（展开和折叠）
今天在工作的时候,遇到了一个需求,就是需要一键展开或者关闭树形结构.关于树形结构的不是很熟悉,然后去百度,结果也不是很准确.最后经过Google才找到.下面分享给大家 直接看代码: var flag ...
- PHP 日期之间所有日期
/** * 获取起止日期之间所有日期 * @param $sdate * @param $edate * @return array */ function get_dates($sdate, $ed ...
- 西北师大-2108Java】第十三次作业成绩汇总
[西北师大-2108Java]第十三次作业成绩汇总 作业题目 面向对象程序设计(JAVA) 第15周学习指导及要求 实验目的与要求 (1)掌握菜单组件用途及常用API: (2)掌握对话框组件用途及常用 ...
- python文件的使用
文件是一个存储在辅助存储器上的数据序列,可以包含任何数据内容.概念上,文件是数据的集合抽象,类似地,函数是程序的集合和抽象.用文件形式组织和表达数据更有效也更为灵活.文件包括两种类型:文本文件和二进制 ...
- java之==操作符和equals操作符
==操作符: 基本数据类型比较值: 引用数据类型比较引用(是否指向同一个对象) equals操作符: 引用数据类型比较引用(是否指向同一个对象) 对于String.File.Date.包装类来说,只比 ...