继承

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. C# 调用OpenCVSharp报错“尝试读取或写入受保护的内存。这通常指示其他内存已损坏”

    一.描述问题 当托管代码调用非托管代码的时候,经常会出现如下报错:“尝试读取或写入受保护的内存.这通常指示其他内存已损坏”. 二.原因分析 由于非托管代码的内存指针的回收是由非托管代码自身手动完成的, ...

  2. Java每日一面(Part2数据库)[19/11/28]

    作者:故事我忘了￠个人微信公众号:程序猿的月光宝盒 1.如何设计一个关系型数据库 如上图,首先划分成两大部分: ​ 1.存储部分:类似一个文件系统,把数据存储到一个持久化设备中,如机械硬盘,固态等 ​ ...

  3. Vue结合后台导入导出Excel问题详解后续

    接前几天写的一篇博客  https://www.cnblogs.com/ttjm/p/11307462.html 在ie浏览器测试发现打不开,经调查问题如下 1 如果在本地开发调试,请求接口报错如下 ...

  4. canvas在vue中的应用

    使用cavas可以绘制各种图表.生成二维码.制作H5小游戏. 生命周期 canvas应该在mounted的生命周期中初始化,在updated中是无效的. export default { mounte ...

  5. 关于字符串的格式化----format与%

    格式化字符串一般有两种方法 1.%(d整数,s字符,f浮点数) 2.format 用处极为广泛且限制不多 注意:第一种对于数组的传递会报TypeError,所以必须传递数组 a = (1, 2, 3) ...

  6. element-ui 中Switch的用法

    在element-ui中,如果你想知道Switch是开还是关,使用事件 @change="getchange(value2)" 它会输出true或者false.true代表的是开, ...

  7. JavaScript-----8.数组

    1.数组的概念 数组是指一组数据的集合,其中每个数据被称为元素,在数组中可以存放任意类型的元素 2. 创建数组 创建数组的两种方式: 利用new创建数组 利用数组字面量创建数组(最常用) 2.1 利用 ...

  8. 1+x 证书 Web 前端开发中级理论考试（试卷 8 ）含答案

    1+x 证书 Web 前端开发中级理论考试(试卷 8 ) 官方QQ群 转载请注明来源:妙笔生花个人博客http://blog.zh66.club/index.php/archives/438/ 一.单 ...

  9. SpringBoot：@Scope注解学习

    概述 先通过注解的javadoc,可以了解到,@Scope在和@Component注解一起修饰在类上,作为类级别注解时,@Scope表示该类实例的范围,在和@Bean一起修饰在方法上,作为方法级别注解 ...

  10. javascript数组在指定位置添加和删除元素

    在JavaScript中,Array对象提供了一个强大的splice()方法,利用这个方法可以达到在数组的指定位置添加和删除元素的目的. 指定位置删除元素 要在指定位置删除元素,可以使用splice( ...