继承

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. Vultr主机绑定域名

    1.在腾讯云上注册域名 然后,域名实名认证 2.Vultr主机购买(看我之前写的:手把手教你如何自己搭梯子) 然后会获取到一个服务器IP地址 3.绑定域名与IP 点解,解析后会弹出让你输入IP地址,此 ...

  2. JT/T 808-2013 道路运输车辆卫星定位系统北斗兼容车载终端通讯协议技术规范

    文档下载地址:JT/T 808-2013 道路运输车辆卫星定位系统北斗兼容车载终端通讯协议技术规范

  3. ABAP分享四 选择屏幕下拉菜单简单实现示例

    PARAMETERS p_carri2 LIKE spfli-carrid                    AS LISTBOX VISIBLE LENGTH 20                ...

  4. LRC歌词原理和实现高仿Android网易云音乐

    大家好,我们是爱学啊,今天给大家带来一篇关于LRC歌词原理和在Android上如何实现歌词逐行滚动的效果,本文来自[Android开发项目实战我的云音乐]课程:逐字滚动下一篇文章讲解. 效果图 相信大 ...

  5. Reinforcement Learning by Sutton 第三章习题答案

    好不容易写完了 想看全部的欢迎点击下面的github https://github.com/LyWangPX/Solutions-of-Reinforcement-Learning-An-Introd ...

  6. <挑战程序设计竞赛> poj 3320 Jessica's Reading Problem 双指针

    地址 http://poj.org/problem?id=3320 解答 使用双指针 在指针范围内是否达到要求 若不足要求则从右进行拓展  若满足要求则从左缩减区域 代码如下  正确性调整了几次 然后 ...

  7. （day68）Vue-CLI项目、页面跳转和传参、生命周期钩子

    目录 一.Vue-CLI (一)环境搭建 (二)项目的创建 (三)项目目录结构 (四)Vue组件(.vue文件) (五)全局脚本文件main.js(项目入口) (六)Vue请求生命周期 二.页面跳转和 ...

  8. vue 父子父组件通过props传父页面请求后的数据

    父子父组件通过props传父页面请求后的数据,则在父页面的子组件上加上判断数据是否存在即可,如下 <gl-line-bar v-if="oneWeekBetEcharts" ...

  9. SpringBoot源码学习系列之@PropertySource不支持yaml读取原因

    然后,为什么@PropertySource注解默认不支持?可以简单跟一下源码 @PropertySource源码: 根据注释,默认使用DefaultPropertySourceFactory类作为资源 ...

  10. oracle相邻表记录交换（单双两两交换）

    在博客园的博问中看到了一个这样的提问:一个表中有id和name两个字段,id是连续非空不重复的,想要交换相邻表记录的name值(单双两两交换). 另外,如果最后的单独行没有对应的下一行匹配记录的话,就 ...