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. Html5学习之旅-html5的留言记事本开发（17）

    web留言记事本的开发 !!!!!代码如下 index.html的代码 <!DOCTYPE html> <html lang="en"> <head& ...

  2. Android进阶(十五)socket通信——聊天室

    想做一个聊天室,花费了将近一天的时间,各种错误.讲解知识点之前,絮叨几句:动手能力还是很重要的,有时看似简单的一个问题,当你真正着手去解决的时候就有可能会遇到各种各样的问题,原因之一就是因为你的知识储 ...

  3. 手把手带你画一个动态错误提示 Android自定义view

    嗯..再差1篇就可以获得持之以恒徽章了,今天带大家画一个比较简单的view. 转载请注明出处:http://blog.csdn.net/wingichoy/article/details/504771 ...

  4. Git版本控制：Git分支处理

    http://blog.csdn.net/pipisorry/article/details/46958699分支的意义创建分支可以避免提交代码后对主分支的影响,同时也使你有了相对独立的开发环境. 假 ...

  5. C语言设计模式-封装-继承-多态

    快过年了,手头的工作慢慢也就少了,所以,研究技术的时间就多了很多时间,前些天在CSDN一博客看到有大牛在讨论C的设计模式,正好看到了,我也有兴趣转发,修改,研究一下. 记得读大学的时候,老师就告诉我们 ...

  6. 集群通信组件tribes之应用程序处理入口

    Tribes为了更清晰更好地划分职责,它被设计成用IO层和应用层,IO层专心负责网络传输方面的逻辑处理,把接收到的数据往应用层传送,当然应用层发送的数据也是通过此IO层发送,数据传往应用层后必须要留一 ...

  7. Java常见运算符整理

    本文是在学习中的总结,欢迎转载但请注明出处:http://blog.csdn.net/pistolove/article/details/44724267 本文主要介绍Java中常见的运算符,重点介绍 ...

  8. SharePoint 2013 入门教程 [不断更新~]

    以下文章是自己在学习SharePoint的过程中,不断积累和总结的博文,现在总结一个目录,分享给大家.这个博客也是自己从SharePoint入门,到一个SharePoint开发的成长记录,里面记录的都 ...

  9. android 股票K线图

    现在在手上的是一个证券资讯类型的app,其中有涉及到股票行情界面,行情中有K线图等,看到网上很多人在求这方面的资料,所以我特地写了一个demo在此处给大家分享一下. 下面是做出来的效果图: 这个 界面 ...

  10. Fullpage参数说明

    参数说明 $(document).ready(function() { $('#fullpage').fullpage({ //Navigation menu: false,//绑定菜单,设定的相关属 ...