层叠性

所谓层叠性是指多种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. 开发 C# OPC 客户端

    编写 opc 客户端的思路 1. 使用OPC Client浏览服务器, 查看测试代码修改后的结果. 2. 根据OPC Client搜集到的服务器信息编写代码和服务器交互 3. OPC Client 操 ...

  2. ASP.Net MVC OA项目笔记<五>

    1.1.1  抽象工厂封装数据操作类实例创建,然后DBSession调用抽象工厂,修改DBSession CZBK.ItcastOA.DALFactory数据会话层调数据层不能直接new,要封装一下解 ...

  3. 【BZOJ5306】 [Haoi2018]染色

    BZOJ5306 [Haoi2018]染色 Solution xzz的博客 代码实现 #include<stdio.h> #include<stdlib.h> #include ...

  4. Spring Boot中使用JdbcTemplate访问数据库

    本文介绍在Spring Boot基础下配置数据源和通过JdbcTemplate编写数据访问的示例. 数据源配置 在我们访问数据库的时候,需要先配置一个数据源,下面分别介绍一下几种不同的数据库配置方式. ...

  5. JS获取浏览器URL中查询字符串的参数

    首先要知道Location这个对象以及这个对象中的一些属性: href:设置或返回完整的url.如本博客首页返回http://www.cnblogs.com/wymninja/ host:设置或返回主 ...

  6. 【原创】SQL Server 性能调优读书笔记

    CPU 100%: 有时可能是硬盘性能不足,或者内存容量不够,让CPU一直忙于I/O. 导致性能问题的一些因素: 用户习惯:在运行尖峰时刻做一些不必做但消耗资源的事情,如之行数据库完整备份,如在服务器 ...

  7. MVC3学习：利用mvc3+ajax实现全选和批量删除

    本例数据库操作使用EF code first; 先利用mvc自带的模板,先生成一个list视图,然后再手动添加复选框和删除按钮 <table> <tr> @*在标题行添加一个全 ...

  8. (转)深入浅出 RPC - 深入篇

    版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/mindfloating/article/details/39474123 <深入篇>我们 ...

  9. 使用 Scrapyd 管理部署 Scrapy 的一些问题

    环境:Ubuntu Xenial (16.04) Scrapy 是一个不错的爬虫框架,但是不支持定时执行,常规的做法是使用 crontab 的方式进行定时执行 shell ,当爬虫数量多的时候,管理起 ...

  10. JSPatch动态更新APP

    JSPatch,只需在项目中引入极小的引擎,就可以使用JavaScript调用任何Objective-C的原生接口,获得脚本语言的能力:动态更新APP,替换项目原生代码修复bug. 用途 是否有过这样 ...