继承

CSS的某些样式是具有继承性的，那么什么是继承呢？继承是一种规则，它允许样式不仅应用于某个特定html标签元素，而且应用于其后代。比如下面代码：

<html>
<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样式呢？

想要理解这个概念，就要先理解权值这个概念。

在百度百科中对于权值的概念是这样的：在数学领域，权值指加权平均数中的每个数的频数，也称为权数或权重。计算机领域中（数据结构）权值就是定义的路径上面的值。可以这样理解为结点间的距离。通常指字符对应的二进制编码出现的概率。

<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样式具有相同权值怎么办？

这就是层叠，如下列代码：

<html>

<head>

<style>

p{color:red}

p{color:green}

</style>

</head>

<body>

<p>123</p>

</body>

</html>

最后p中的文本会设置成green，层叠很好理解。

重要性

当我们在做网页代码时，有些特殊的情况需要为某些样式设置具有最高权值，怎么办？这时我们可以使用！important来解决

如下代码：

<html>

<head>

<style>

p{color:red!important;}

p{color:green}

</style>

</head>

<body>

<p>123</p>

</body>

</html>

这时p的颜色为红色。

CSS中继承，特殊性，层叠与重要性的更多相关文章

  1. CSS中的样式层叠机制Cascade

    CSS中的样式层叠机制Cascade 一.样式冲突   样式冲突是CSS渲染过程要解决的一个关键问题,样式冲突主要由两个原因造成: 元素包含了不同对象所赋予的样式:浏览器.用户.作者.其中,浏览器样式 ...

  2. 从零开始学习html（九）CSS的继承、层叠和特殊性

    一.继承 <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" co ...

  3. css的继承和层叠

    标签(空格分隔): css css称为层叠样式表,CSS有两大特性:继承性和层叠性,本章简单介绍一下继承性: 继承性: 定义:继承就是给父及设置了一些属性,子级继承了父及的该属性,这就是我们的css的 ...

  4. CSS系列：CSS的继承与层叠特性

    1. CSS的继承特性 所有的CSS语句都是基于各个标记直接的继承关系,CSS继承是指子标记会继承父标记的所有样式风格,并可以再父标记样式风格的基础上再加以修改,产生新的样式,而子标记的样式完全不会影 ...

  5. CSS中的特殊性、继承、层叠

    前言 最近在看<CSS权威指南>,书中第三章“结构和层叠”对特殊性的解释十分到位,今天就来整理下思路,记录如下. 初来乍到,有何不妥请多多指点,有时间的话顺便评论下,讨论讨论~ 引入问题

  6. html学习第二天—— 第九、十章——CSS的继承、层叠和特殊性+CSS格式化排版

    继承CSS的某些样式是具有继承性的,那么什么是继承呢?继承是一种规则,它允许样式不仅应用于某个特定html标签元素,而且应用于其后代.比如下面代码:如某种颜色应用于p标签,这个颜色设置不仅应用p标签, ...

  7. HTML+CSS学习笔记（9）- CSS的继承、层叠和特殊性

    标签:HTML+CSS 继承 CSS的某些样式是具有继承性的,那么什么是继承呢?继承是一种规则,它允许样式不仅应用于某个特定html标签元素,而且应用于其后代.比如下面代码:如某种颜色应用于p标签,这 ...

  8. css的继承、层叠和特殊性

    1,继承  css的某些样式是具有继承性的,那么什么是继承呢?继承是一种规则,它允许样式不仅应用于某个特定html标签元素,而且应用于其后代. 但注意有一些css样式是不具有继承性的.如border: ...

  9. CSS学习笔记之CSS的继承、层叠和特殊性

    继承 CSS的某些样式是具有继承性的,那么什么是继承呢?继承是一种规则,它允许样式不仅应用于某个特定html标签元素,而且应用于其后代.比如下面代码:如某种颜色应用于p标签,这个颜色设置不仅应用p标签 ...

随机推荐

  1. Eclipse里面的一些常规设置

    一.Eclipse里面的默认编码是GBK,但是Android开发的编码都是UTF-8,所以一定要修改自己的工程的编码,不要坑队友哦~ (1)选中当前的工程,点击右键,如图选择(这只是改变当前工程的编码 ...

  2. numberOfRowsInSection方法什么时候调用

    昨天在代码里遇到个问题,很简单的数组越界,但是真心觉得自己把数据处理的思路都理清了不应该会出现这种情况,而且打印出来出现了"灵异事件",那就是行数只有14行,但是cell加载到了1 ...

  3. 关于MVC中View使用自定义方法

    今天学习到了在MVC的View中使用自定义方法,很简单,下面分享一下. 1.首先在项目下面建立一个文件夹,用于存我们写的自定义方法. 2.在新建文件夹中新增一个类,命名随便取(最好还是和自定义方法关联 ...

  4. nfs：环境搭建

    准备环境 通过VirtualBox创建两台虚拟机client1和client2,这两台虚拟机和物理主机组成一个网络.将物理主机作为NFS的服务端,虚拟机client1和client2作为NFS的客户端 ...

  5. OleDb 内存泄露问题

    近期在定位问题时发现使用OleDb打开很大的Excel文件后,即使什么都不操作Colse掉,内存释放了部分,但是并未回到打开前的水平.在Excel 150M,解压缩后900M的场景下,打开后直接Clo ...

  6. Mac Virtual System On Windows

    Win8.1下利用虚拟机安装苹果操作系统 所需文件: 虚拟机:VMware -10.0.1,这个就是中文版的了. 虚拟机密钥生成器:vm10keygen,要对应虚拟机的版本. 虚拟机的插件: unlo ...

  7. hibernate+mysql 自动生成数据库问题

    Hibernate Entity类 表名注解大写时,在windows下mysql自动生成的表都为小写(不区分大小写),在linux下mysql自动生成区分大小写.导致数据库问题. 原因(window下 ...

  8. apache和nginx开启https

    1.安装mod_ssl和openssl yum -y install mod_ssl openssl 2.建立服务器密钥 mkdir /etc/httpd/conf.d/ssl.key/ cd /et ...

  9. 找出一个二维数组中的"鞍点",即该位置上的元素在该行中最大,在该列中最小(也可能没有"鞍点"),打印有关信息.(提示:注意特殊情况:没鞍点或多个鞍点)

    #import <Foundation/Foundation.h> int main(int argc, const char * argv[]) { ][] = {}; ;i < ...

  10. Python 第五天 模块(2)

    模块,用一砣代码实现了某个功能的代码集合. 有两种存在的方式 1.写到一个文件夹里面 2.py文件 类似于函数式编程和面向过程编程,函数式编程则完成一个功能,其他代码用来调用即可,提供了代码的重用性和 ...