CSS具有两个核心的概念——继承和层叠。一般文本类的属性会被继承，即某个元素的CSS属性会传递给内部嵌套的元素。一个元素可能有一个或者多个样式的来源，当属性发生冲突时，就会根据加载顺序和权重大小决定层叠之后显示的属性。先看一个层叠机制表，并对照例子观察层叠规律：

  行内 id class 元素
行内 1 0 0 0
id 0 1 0 0
class、属性、伪类 0 0 1 0
元素、伪元素 0 0 0 1
通配符 * 0 0 0 0
!important 最高

　　不同的选择器具有不同的权重值，只有在选择器指向同一元素的时候才会比较权重，如 #wrapper span 和 span[name=test] 并不是指向同一元素，因为后面的选择器指向属性name为test的span元素，所以后面选择器的属性生效，没有冲突的样式才会应用前面选择器的。

<div id="wrapper">

    <span name="test"><span>

</div>

　　对所有类型设置字体颜色，结果如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css优先级测试</title>
    <style>
        #test{  color: orange;}
        .test{  color: yellow;  }
        p{  color: green;  }
        *{  color: cyan;  }
        p{  !important;  color: blue;  }
        span{  color: purple;  }
    </style>
</head>
<body>
    <p style="color: red">内嵌红色</p>
    <p id="test">id橙色</p>
    <p class="test">class黄色</p>
    <p>元素绿色</p>
    <p>通配青色</p>
    <p>最高蓝色</p>
    <p> <span>子元素紫色</span> </p>
</body>
</html>

　　在页面中显示结果如下：

　　可以看到元素和通配符设置的CSS属性没有显示本身的文字颜色，其余均正确显示设置的颜色，检查内嵌、id和class的样式变化，结果如下：

　　可以看到，网页先进行继承，将通配给html和body的青色判定后，在进行对这个p元素的CSS颜色设置，随后根据权重先后选择了通配、元素、最高的颜色，最后锁定类名设置的黄色，通过这样的比较，前面6组都能得到结果，最后一个span检查结果如下：

　　现在原因也是一目了然，span元素逐级继承，此处的p元素文本是蓝色，再对span元素进行层叠，有通配的青色和元素的紫色，由于元素优先级高，所有采用了元素设置的紫色。

　　对同一个元素，分别设置内嵌、id、class和元素选择器设置颜色，内嵌字体颜色红色，id橙色，class黄色，元素绿色，代码如下：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>css同一元素优先级测试</title>

    <style>

        #test{  color: orange;}

        .test{  color: yellow;  }

        p{  color: green; }

    </style>

</head>

<body>

    <p id="test" class="test" style="color: red">同一元素测试</p>

</body>

</html>

　　网页中显示结果如下：

　　检查其变换规则：

　　元素选择器优先级最低，绿色最底层，伪类黄色其次，id橙色再层叠，内嵌优先级最高，红色在最上方，最后显示红色。

　　对于嵌套元素，针对该元素采用不同的叠加，需要比较每一位数值比较其重要性，如：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>css层叠测试</title>

    <style>

        .box1 .p1 span{color: red;}

        .box1 span{color: blue;}

        .box1 p span{color: green;}

    </style>

</head>

<body>

    <div class="box1">

        <p class="p1">

            <span>四川</span>

        </p>

    </div>

</body>

</html>

　　显示结果如下：

　　首先.box1 span的层叠数为0 0 1 1，.box1 p span的数值为0 0 1 2，.box1 .p1 span的数值为0 0 2 1，所以先采用数值最小的颜色，再被数值较大的绿色覆盖，最后是数值最大的红色，最终被显示。

　　总结一下，html的层叠是由通配、元素和伪元素、class和伪类、id、内嵌从底层往上层依次层叠，对于同一级的选择器，具有!important;属性的优先级最高，否则就要根据其放置的顺序判断。元素属性从最大一级的祖先元素继承，依次判断继承直至到该元素内容所在的设置有css样式的最里面一层。

CSS层叠和继承的更多相关文章

  1. CSS 层叠与继承

    三种继承css方式 1.段内继承 <p style="color: red;font-size:50px;">样式原文</p> 原文变成 红色, 原文字体变 ...

  2. CSS特性： 继承 和 层叠

    在css中也存在着继承关系,与面向对象的编程语言不同,css的继承很简单,而且主要指的是在CSS盒模型中,外围的盒子的样式会被内部所包含的盒子所继承.具体来了解一下. HTML元素之间存在一个”树型“ ...

  3. CSS学习摘要-层叠和继承

    当有多个选择器作用在一个元素上时,哪个规则最终会应用到元素上? 其实这是通过层叠机制来控制的,这也和样式继承(元素从其父元素那里获得属性值)有关. 元素的最终样式可以在多个地方定义,它们以复杂的形式相 ...

  4. CSS核心内容：层叠和继承

    实际的工作中,当有多个选择器作用在一个元素上时,哪个规则最终会应用到元素上?其实这是通过层叠机制来控制的,这也和样式继承(元素从其父元素那里获得属性值)有关.样式的优先级就是这样的一个机制,它包括!i ...

  5. CSS层叠

    前面的话 层叠样式表CSS最基本的一个特性就是层叠.冲突的声明通过层叠进行排序,由此确定最终的文档表示.而这个过程的核心就是选择器及其相关声明的特殊性.重要性.来源及继承机制.本文将详细介绍CSS层叠 ...

  6. css层叠选择

    首先声明一下CSS三大特性——继承.优先级和层叠.继承即子类元素继承父类的样式,比如font-size,font-weight等f开头的css样式以及text-align,text-indent等t开 ...

  7. css层叠规则,优先级算法

    前言 层叠样式表CSS最基本的一个特性就是层叠.冲突的声明通过层叠进行排序,由此确定最终的文档表示.而这个过程的核心就是选择器及其相关声明的特殊性.重要性.来源及继承机制.本文将详细介绍CSS层叠 特 ...

  8. CSS学习笔记03 CSS层叠性、继承性、特殊性

    层叠性 所谓层叠性是指多种CSS样式的叠加,也就是说后面设置的样式会层叠(覆盖)之前的样式,层叠性的前提是CSS的选择器的优先级相同,例如,当使用内嵌式CSS样式表定义<p>标记字号大小为 ...

  9. css层叠性和继承性

    1.了解css层叠性 层叠性是什么?就是解决处理css选择器和属性冲突的能力.css的选择器权重是分大小,就是当多个选择器都选中了同一个标签时,听谁的??? 标签选择器 < 类选择器 < ...

随机推荐

  1. 最新的App上架教程Object-C

    准备 开发者账号 完工的项目 上架步骤 一.创建App ID 二.创建证书请求文件 (CSR文件) 三.创建发布证书 (CER) 四.创建Provisioning Profiles配置文件 (PP文件 ...

  2. git中failed to push some refs to git问题解决及基本使用

    国庆归来准备试用一下git,在提交代码时遇到时遇到一些问题 提交时使用git push origin master 出现failed to push some refs to git 回想一下,创建该 ...

  3. Java 开源 CMS ：magnolia

    Magnolia 是一个开源基于Java的Web内容管理系统(CMS),构建在Java内容知识库标准(JSR-170).在使用它的过程中,我发现它的界面确实很有特色:给人一种Win8的感觉.在此记录一 ...

  4. Ubuntu14.04安装Matlab2013a

    source url: http://blog.sina.com.cn/s/blog_ec5021d60102v3ky.html 1. 为方便操作,把Matlab镜像文件(iso)重命名为'Matla ...

  5. 基于Reactjs实现webapp（加精）

    git原文链接:https://github.com/my-fe/wiki/issues/1 由于最近的reactjs实在太火,而且距离第一版已经快2年的时间了,已经相对稳定和成熟了,基于这两个前提下 ...

  6. unity 球体表面平均分割点

    之前看了别人的一份源码,讲到了球体表面平均分割点,于是也好奇去查了一下算法,自己写不出来,借用算法在unity写了一个小demo using UnityEngine; using System.Col ...

  7. 手持机设备公司(WINCE/ANDROID/LINUX)

    1.深圳扬创科技有限公司网址: http://www.yctek.com/ 2.无锡盈达聚力科技有限公司 点击打开链接 3.上海鲲博通信技术有限公司(主要为用WINCE开发导航产品) 点击打开链接 4 ...

  8. Android监听电池状态

    监听电池状态只需要接收Intent.ACTION_BATTERY_CHANGED的广播即可,当电池状态发生变化时会发出广播. 1.运行状态如下图: (1)连接USB时的状态 (2)断开USB时的状态 ...

  9. eclipse中Debug简单记忆

    最左边:代码一步一步的走,进入函数也是一步一步的走: 最中间:在断点开始一步一步的走,遇到函数不会进入函数,而是直接跳过函数(但是把函数中的代码整体走完的): 最右边:断点开始一部迅速返回上一级函数调 ...

  10. 网站开发进阶(十七)Html元素隐藏的几种方式

    Html元素隐藏的几种方式 隐藏Html元素的方法最常用的方法有css的display:none,一种方法两种实现方式,感兴趣的朋友可以了解下. 1.使用css style="display ...