继承

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中层叠和继承的概念。的更多相关文章

  1. 关于css中层叠性的一点理解

    关于css层叠性的一点理解 标签(空格分隔): html css 我们平时在写css的时候会遇到这样的情况 <!DOCTYPE html> <html lang="en&q ...

  2. CSS中inherit指定继承的使用方法和auto的区别

    CSS中的每个属性都有一个特定值"inherit",其含义是指定继承父元素的相应属性,使用inherit一方面在代码上能地表明要继承于父元素的样式属性,另一方面也使子元素继承了那些 ...

  3. CSS中那些必须掌握的概念

    一.盒子模型 1.什么是盒子模型 css盒模型本质上是一个盒子,封装周围的html元素,它包括:外边距(margin).边框(border).内边距(padding).实际内容(content)四个属 ...

  4. CSS基础-层叠与继承

    继承 一些属性可以被继承,一些不可以. 一般来说,字体颜色.字体大小会被继承,关于形状的如 padding .border .margin.width等就不会被继承.哪些属性属于默认继承很大程度上是由 ...

  5. css中属性值继承小解

    继承:html元素可以从父元素那里继承一部分css属性,即使当前元素没有定义该属性. 1.css可以和不可以继承的属性 不可继承的:display.margin.border.padding.back ...

  6. Css中的两个重要概念：块状元素和内联元素

    一.display:block display:block就是将元素显示为块级元素,一般是其他元素的容器,可容纳内联元素和其他块状元素,块状元素排斥其他元素与其位于同一行,宽度(width)高度(he ...

  7. CSS中层叠和CSS的7阶层叠水平（上篇）

    今天搜索资料时,忽然发现了以前没注意的一个知识点,所以拖过来搞一搞,这个知识点叫做CSS的7阶层叠水平 在说这个知识之前,我们必须要先了解一个东西以便于我们更好的理解CSS的7阶层叠水平 这个东西就是 ...

  8. javascript中对象函数继承的概念

    什么是函数对象?这个对象既是通常意义上的对象,又可以加上括号直接执行的函数. 产生函数对象的方式有两种:1.通过function关键字产生:var fn = function(){};2.实例化Fun ...

  9. css中权重与继承

    出处:http://blog.csdn.net/xf616510229/article/details/53613212

随机推荐

  1. Windows系统Git配置教程（Git配置git config）

    Windows系统Git配置教程(Git配置git config)   在很多Git配置教程中,多是安装完毕后就告诉大家要配置用户名和邮箱,但是这个配置是保存在哪里呢,配置后面的参数有什么不同呢,下面 ...

  2. ActiveMQ下载与安装（消息中间件JMS）

    下载 官方网站下载:http://activemq.apache.org/ 1.3.2安装(Linux) (1)将apache-activemq-5.12.0-bin.tar.gz 上传至服务器 (2 ...

  3. [Go]TCP服务中增加消息队列与工作池

    之前的处理中每一个连接都会创建一个主groutine , 每个连接中的主groutine中创建出读groutine 和写groutine 每个连接处理业务再单独开出一个groutine ,这样如果有1 ...

  4. 以太网驱动的流程浅析(四)-以太网驱动probe流程【原创】

    以太网驱动的流程浅析(四)-以太网驱动probe流程 Author:张昺华 Email:920052390@qq.com Time:2019年3月23日星期六 此文也在我的个人公众号以及<Lin ...

  5. R-5 相关分析-卡方分析

    本节内容: 1:相关分析 2:卡方分析 一.相关分析 相关系数: 皮尔逊相关系数:一般用来计算两个连续型变量的相关系数. 肯德尔相关系数:一个连续一个分类(最好是定序变量) 斯皮尔曼相关系数:2个变量 ...

  6. 第一篇：C++之hello world

    1.编辑器:Microsoft Visual C++ 2010,下载安装 2.新建项目 代码: #include <iostream>#include <Windows.h>/ ...

  7. 多个线程运行MR程序时hadoop出现的问题

    夜间多个任务同时并行,总有几个随机性有任务失败,查看日志: cat -n ads_channel.log |grep "Caused by" Caused by: java.uti ...

  8. jvm虚拟机笔记<五> 编译期优化

    JVM的编译器可以分为三个编译器: 1.前端编译器:把.java转变为.class的过程.如Sun的Javac.Eclipse JDT中的增量式编译器(ECJ). 2.JIT编译器:把字节码转变为机器 ...

  9. Oracle merge into的优势

    简介 Oracle merge into命令,顾名思义就是“有则更新,无则插入”,这个也是merge into 命令的核心思想,在实际开发过程中,我们会经常遇到这种通过两表互相关联匹配更新其中一个表的 ...

  10. SQL Server(MSSQLSERVER) 请求失败或服务未及时响应，有关详细信息，请参见事件日志或其他的适用的错误日志。

    转自:https://www.fengjunzi.com/blog-25573.html 问题 有时候sqlserver无法启动了,原因是mssqlserver服务没有启动,当你手动启动时,又出现服务 ...