层叠性

所谓层叠性是指多种CSS样式的叠加，也就是说后面设置的样式会层叠（覆盖）之前的样式，层叠性的前提是CSS的选择器的优先级相同，例如，当使用内嵌式CSS样式表定义<p>标记字号大小为12像素，链入式定义<p>标记颜色为红色，那么段落文本将显示为12像素红色，即这两种样式产生了叠加。

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>CSS层叠性</title>

     <style>

         .box {

             background-color: red;

             height: 200px;

             width: 200px;

         }

         .wrap {

             background-color: green;

         }

     </style>

 </head>

 <body>

     <div class="box wrap">

     </div>

 </body>

 </html>

浏览器显示的结果为长宽各为200像素，背景色为绿色的div，原因是box中定义的背景色被wrap中定义的背景色覆盖了

通过浏览器的F12审查元素，也可以看出

继承性

CSS的继承性是指，子容器的样式会继承父容器的样式。但并不是所有的样式都能继承。只有部分样式能继承，比如：文字相关字体大小、颜色、字体样式、行高、鼠标样式等。

盒子相关的样式都不能继承，比如：宽高、背景色、边距、浮动、绝对定位等。

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>CSS继承性</title>

     <style type="text/css">

         .parent {

             color: red;

             font-size: 20px;

             height: 300px;

             width: 300px;

             background-color: green;

         }

         .child {

             height: 100px;

             width: 100px;

         }

     </style>

 </head>

 <body>

     <div class="parent">

         我是父div

         <p>

             我是段落

         </p>

         <div class="child">我是子div</div>

     </div>

 </body>

 </html>

效果如下：

可以看到p标签与子div都继承了父div字体的颜色与大小，但是子div没有继承父div的宽高与背景色，

继承的样式实线字表示了出来，其他样式虚化了。

注意：恰当地使用继承可以简化代码，降低CSS样式的复杂性。但是，如果在网页中所有的元素都大量继承样式，那么判断样式的来源就会很困难，所以对于字体、文本属性等网页中通用的样式可以使用继承。例如，字体、字号、颜色、行距等可以在body元素中统一设置，然后通过继承影响文档中所有文本。

特殊性（优先级）

定义CSS样式时，经常出现两个或更多规则应用在同一元素上，这时就会出现优先级的问题。这时元素显示的是哪种样式呢？

首先我们先给出一个优先级的结论：

  • 行内样式 > 页内样式 > 外部引用样式 > 浏览器默认样式
  • important > 内联 > ID > 伪类|类 | 属性选择  > 标签  > 伪对象 >  通配符 > 继承

下面来看例子，默认情况下，字体的颜色由浏览器的设置决定

当我们给body加上样式之后，字体的颜色变为了红色，说明继承的样式>浏览器默认样式

当我们给加上通配符的样式之后，字体颜色变为了灰色

说明通配符的样式优于继承的样式，再试一下标签选择器的样式优先级

可见标签选择器的优先级优于通配符的样式，其他类型的样式可以自行测试，其中!important可以改变样式的权值

可以看到h1标题显示的字体颜色为蓝色，因为!important属性可以提高样式的权值，下面简单说明下css的权值，css中每种样式类型都有自己的权值

1、内联样式表的权值最高 1000；
2、ID 选择器的权值为 100
3、Class 类选择器的权值为 10
4、HTML 标签选择器的权值为 1

p{color:red;} /*权值为1*/

p span{color:green;} /*权值为1+1=2*/

.warning{color:white;} /*权值为10*/

p span.warning{color:purple;} /*权值为1+1+10=12*/

#footer .note p{color:yellow;} /*权值为100+10+1=111*/

注意：还有一个权值比较特殊--继承也有权值但很低，有的文献提出它只有0.1，所以可以理解为继承的权值最低。

有时候我们会在同一元素上应用不同的样式规则，例如

CSS学习笔记03 CSS层叠性、继承性、特殊性的更多相关文章

  1. HTML+CSS学习笔记 (7) - CSS样式基本知识

    HTML+CSS学习笔记 (7) - CSS样式基本知识 内联式css样式,直接写在现有的HTML标签中 CSS样式可以写在哪些地方呢?从CSS 样式代码插入的形式来看基本可以分为以下3种:内联式.嵌 ...

  2. HTML+CSS学习笔记 (12) - CSS布局模型

    标签:HTML+CSS css布局模型 清楚了CSS 盒模型的基本概念. 盒模型类型, 我们就可以深入探讨网页布局的基本模型了.布局模型与盒模型一样都是 CSS 最基本. 最核心的概念. 但布局模型是 ...

  3. DIV+CSS学习笔记（CSS）

    css基础知识: css样式表的定义 css:(Cascading Style Sheets)层叠样式表: 分类及位置:内部样式-head区域style标签里面 外部样式-link调用 内联样式-标签 ...

  4. CSS学习笔记02 CSS选择器

    1.通配符选择器 通配符选择器用“*"号表示,是所有选择器中作用范围最广的,能匹配页面中所有的元素 /*设置当前页面中所有标签的颜色为红色*/ * { color: red; } 2.标签选 ...

  5. CSS学习笔记01 CSS简介

    1.CSS定义 CSS 指层叠样式表 (Cascading Style Sheets),是一种样式表语言,用来描述 HTML 或 XML(包括如 SVG.XHTML 之类的 XML 分支语言)文档的呈 ...

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

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

  7. Head First Html and CSS学习笔记之CSS

    第七章 CSS入门 元素的许多属性都可以设置样式,太多了,记不住,可以参考<CSS Pocket Reference>. 外部样式表,<link type = "text/ ...

  8. CSS学习笔记04 CSS文字排版常用属性

    字体样式属性 font-size:字号大小 font-size属性用于设置字号,该属性的值可以使用相对长度单位,也可以使用绝对长度单位.其中,相对长度单位比较常用,推荐使用像素单位px,绝对长度单位使 ...

  9. HTML+CSS学习笔记 (13) - CSS代码缩写，占用更少的带宽

    标签:HTML+CSS 盒模型代码简写 还记得在讲盒模型时外边距(margin).内边距(padding)和边框(border)设置上下左右四个方向的边距是按照顺时针方向设置的:上右下左.具体应用在m ...

随机推荐

  1. UWP 2018 新版 NavigationView 尝鲜

    本文参考了官方文档以及提供的示例代码(官方代码貌似有点误导,所以写了这一篇,并且文末有GayHub代码地址) 官方文档发布于20180806,说明NavigationView刚发布了没几天,还在开发中 ...

  2. mysql日期时间函数使用总结

     获取函数 mysql默认的时间格式: yyyy-MM-dd 或者 yyyy-MM-dd HH:mm:ss 1. Date() 返回日期部分, date('2018-02-14 17:03:04') ...

  3. One difference between AngularJS' $location and window.location

    Recenently, I encountered a problem. Client side code is: $http({ url: "/api/runtimelicense&quo ...

  4. 课程一(Neural Networks and Deep Learning)，第三周（Shallow neural networks）—— 2、Practice Questions

    1.以下哪一项是正确的?(检查所有适用的) (A,D,F,G) A.  a[2] 表示第二层的激活函数值向量. B. X 是一个矩阵, 其中每一行都是一个训练示例. C. a[2] (12) 表示第二 ...

  5. 集合框架_DAY16

    1:List及其子类(掌握)     (1)List的特点:     Collection    |--List:元素有序(存入顺序和取出顺序一致),可重复.    |--Set:元素无序,唯一.   ...

  6. Android 开发工具类 37_ ContactInfoProvider

    Android 手机中的联系人信息保存在  data\data\com.android.providers.contacts\databases\contacts2.db 中.主要有 raw_cont ...

  7. Docker概念学习系列之虚拟化（系统虚拟化和容器虚拟化）

    不多说,直接上干货! 虚拟化定义: 虚拟化是一种资源管理技术,是将计算机的各种实体资源,如服务器.网络.内存及存储等,予以抽象.转换后呈现出来,打破实体结构间的不可切割的障碍,使用户可以比原本的配置更 ...

  8. Attr类中进行类型推断

    涉及到重要的类的继承关系如下图所示. 关于抛出的异常继承体系:

  9. JAVA 利用Dom4j实现英语六级词汇查询 含演示地址

    要求 必备知识 基本了解JAVA编程知识,DOM基础. 开发环境 MyEclipse10 演示地址 演示地址     通过前面几天的学习,现在基本掌握了JAVA操作DOM方面的知识,现在来一个小DEM ...

  10. How to correctly handle ThreadLocal.get() returning null

    Java's ThreadLocals make certain things easy, but special care must be taken to make sure they are r ...