继承

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. Java并发J.U.C学习总结

    转载自http://www.cnblogs.com/chenpi/结合自己理解稍有添加自己的理解 阅读目录 JSR 166及J.U.C Executor框架(线程池. Callable .Future ...

  2. Jupiter 页面环境下使用pip无法安装（AttributeError: module 'pip' has no attribute 'main'）

    异常: AttributeError Traceback (most recent call last) <ipython-input-5-880e5dfa627c> in <mod ...

  3. How to: Implement File Data Properties 如何:实现文件数据属性

    This topic demonstrates how to implement a business class with a file data property and a file colle ...

  4. 与用户xxx一起提供的密码不正确。请确认输入的密码正确并重试

    环境: SharePoint 2010 / 2013 以系统账户身份登录管理中心,然后创建Web Application,报: 与用户xxx一起提供的密码不正确.请确认输入的密码正确并重试 明明都已经 ...

  5. JavaWeb 错误/异常时页面提示

    经常我们会遇到发生页面404错误,服务器 500 异常,如果默认方式处理,则是将异常捕获之后跳到 Tomcat 缺省的异常页面,如下图所示.

  6. nginx安装及配置访问本地文件

    第一步安装nginx windows可以直接去官网下载,解压就能用 http://nginx.org/en/download.html ubuntu用命令行 sudo apt-get install ...

  7. Linux笔记16 使用Vsftpd服务传输文件;使用Samba或NFS实现文件共享。

    FTP协议有下面两种工作模式. 1.主动模式:FTP服务器主动向客户端发起连接请求. 2.被动模式:FTP服务器等待客户端发起连接请求(FTP的默认工作模式).Vsftpd服务程序vsftpd作为更加 ...

  8. MS SQL 批量操作

    MS SQL支持 sysobject,因此可以用以下条件语句查询表对象 select Name from sysobjects where xtype='U' and Name like 'dnt_% ...

  9. C# 类库项目 无法创建 “资源字典” 文件

    1.接触WPF有两个月时间了,准备自己写一个样式库,在vs新建 类库项目后无法创建资源字典. 2.解决办法: 打开项目工程文件      (  project.csproj) 在 <Proper ...

  10. leetcode-二叉树

    树以及常用的算法 树的概念 树(Tree)的基本概念树是由结点或顶点和边组成的(可能是非线性的)且不存在着任何环的一种数据结构.没有结点的树称为空(null或empty)树.一棵非空的树包括一个根结点 ...