继承

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. Asp.net Core3.0 跨域配置

    原文:http://www.zilaohu.cn/Jie/Detail_Jie?ID=78840a04-55b8-4988-80b2-f964fd822d63 下面配置后:被拒绝的域请求后,可以进入方 ...

  2. tf.nn.in_top_k的用法

    tf.nn.in_top_k组要是用于计算预测的结果和实际结果的是否相等,返回一个bool类型的张量,tf.nn.in_top_k(prediction, target, K):prediction就 ...

  3. sleuth和zipkin微服务里的链路跟踪

    分布式链路跟踪介绍 对于一个微服务系统,大多数来自外部的请求都会经过数个服务的互相调用,得到返回的结果,一旦结果回复较慢或者返回了不可用,我们就需要确定是哪个微服务出了问题.于是就有了分布式系统调用跟 ...

  4. JDK新特性关于流操作部分

    // array 工具类 可以用来快捷的将数组转化为list List<String> strings = Arrays.asList("zhongguo", &quo ...

  5. QT--吃月亮小游戏

    QT--吃月亮小游戏 简介: 该设计使用了鼠标事件.键盘事件.绘图事件,可通过鼠标或者方向键控制人物移动吃到月亮 代码: 1.widget.h文件: #ifndef WIDGET_H #define ...

  6. Git仓库分支管理

    #前提条件:#一.使用命令“cd /d/BranchMgr”进入到需要进行分支管理的仓库的目录,“/d/BranchMgr”是仓库路径.如下图: ”Administrator@DESKTOP-VL6G ...

  7. Ubuntu上安装python模块

    sudo apt-get install python-pip   ----先安装 pip模块 sudo pip install openpyxl ---通过pip安装python模块

  8. LeetCode刷题-最长公共前缀（简单）

    题目描述 编写一个函数来查找字符串数组中的最长公共前缀. 如果不存在公共前缀,返回空字符串 "". 示例 1: 输入: ["flower","flow ...

  9. canvas应用

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  10. IT兄弟连 HTML5教程 HTML5文字版面和编辑标签 HTML基础标签

    指引 网页中的信息主要是以文本为主的,可以通过字体.大小.颜色.底纹.边框等来设置文本的属性.文字版面的编辑包括文本标签和格式标签两种,在浏览器中显示的文字内容和格式都要在<body>标记 ...