关于css层叠性的一点理解

标签（空格分隔）： html css

我们平时在写css的时候会遇到这样的情况

 <!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>demo01</title>

    <style type="text/css">

    #div1 #div2 p {

        color: red;

    }

    .color1 .color2 p {

        color: blue;

    }

    </style>

</head>

<body>

    <div id="div1" class="color1">

        <div id="div2" class="color2">

            <p>看看我是什么颜色吧</p>

        </div>

    </div>

</body>

</html>

在这里，我们对同一个段落定义了两种颜色，那么这个段落到底会显示什么颜色呢？



是的，显示了红色，肯定很多人已经很清楚了，这里涉及到了一个选择器的权重问题。

一个选择器的权重是这样计算的：

  1. 对于选择器中给定的各个ID值，加0,1,0,0.
  2. 对于选择器中给定的各个类属性值、属性选择或伪类，加0，0,1,0.
  3. 对于选择器中给定的各个元素和伪元素，加0,0,0,1.
  4. 最后，结合符和通配符对特殊性没有任何贡献，也就是0,0,0,0

所以上面的例子中红色的权重为0,2,0,1，蓝色权重为0，0,2,1，显然红色的更IMBA，所以显示为红色。

我们接着看这个例子

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>demo03</title>

    <style type="text/css">

    #div1 .color2 p {

        color: red;

    }

    .color1 #div2 p {

        color: blue;

    }

    </style>

</head>

<body>

    <div id="div1" class="color1">

        <div id="div2" class="color2">

            <p>看看我是什么颜色吧</p>

        </div>

    </div>

</body>

</html>

在这个例子里面，两种颜色的权重相同都是0，1,1,1.那么在这种情况下,就会采用“后来居上”的原则，也就是后面的属性会覆盖前面的属性

我们可以看到红色被覆盖了



我们再看下面这个例子

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style type="text/css">

    #div1 #div2 {

        color: red;

    }

    .color1 .color2 p {

        color: blue;

    }

    </style>

</head>

<body>

    <div id="div1" class="color1">

        <div id="div2" class="color2">

            <p>看看我是什么颜色吧</p>

        </div>

    </div>

</body>

</html>

这里，如果有不清楚的童鞋可能会认为：红色的权重更高，所以应该显示为红色，我们来看看结果



为什么是蓝色呢？这里我们应该注意到，红色的这个选择器并没有真正选中p标签，也就意味着，p标签里的颜色是通过继承父div得到的

我们可以看出，继承的来的属性权重非常低，完全不如ID选择器和class选择器或者标签，那么他到底有多低呢？看下面的例子，我们在上面的代码中加入这样一个css语句

*{

    	color: green;

    }

结果如何呢？



前面说过，通配符的权重为0,0,0,0，但继承来的属性依然干不过通配符。其实，继承的值根本没有权重值，甚至连0都没有，也就是说，谁都可以秒杀他.

我们还会遇到一种情况

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>demo04</title>

    <style type="text/css">

    #div1 {

        color: red;

    }

    .color1 .color2 {

        color: blue;

    }

    </style>

</head>

<body>

    <div id="div1" class="color1">

        <div id="div2" class="color2">

            <p>看看我是什么颜色吧</p>

        </div>

    </div>

</body>

</html>

这里两种颜色都是继承值，那该听谁的呢？这里采用的是“就近原则”，也就是说，谁的选择符描述离目标近，就听谁的。显然，蓝色的选择符描述的更近，所以会显示蓝色



最后，我们来看一个更特殊的例子

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>demo01</title>

    <style type="text/css">

    #div1 #div2 {

        color: red;

    }

    .color1 .color2 {

        color: blue;

    }

    </style>

</head>

<body>

    <div id="div1" class="color1">

        <div id="div2" class="color2">

            <p>看看我是什么颜色吧</p>

        </div>

    </div>

</body>

</html>

这个例子中，两者都是继承值，描述的离目标一样近，那么结果会如何呢？



其实，在这种情况下，会再比较他的权重值，权重值大的获胜，此时如果权重值在相同，就要采用“后来居上”原则

通过以上几个例子，总结一下，css属性层叠性主要是这样来确定的

1.元素被直接选中时，看权重，权重相同的，“后来居上”

2.元素没有被直接选中，（也就是继承值），“就近原则”。如果距离相同，看权重，权重再相同，“后来居上”。

ps：最近刚开始学习前端，所以有很多的知识可能理解的很肤浅甚至可能是错误的，所以希望各位大神能够批评指正，谢谢！

----关爱“小学生”协会

关于css中层叠性的一点理解的更多相关文章

  1. 【CSS】我的颜色到底听谁的？—— css的层叠性

    我们之前学了很多个选择器,都可以帮我们定位到具体标签上,然后我们在设置样式.但这也不可避免会产生一个问题:如果多个选择器同时指向同一个标签,那么到底该听谁的??? css一定有自己的机制来处理这个问题 ...

  2. CSS+DIV入门第一天基础视频 CSS选择器层叠性和继承性

    大家好,我是小强老师, 现在网上的CSS+DIV视频,要么讲的太深,要么太浅,很多初学的同学们总是遇到困难,今天小强老师专门给大家准备了css课程的视频.带你从零基础学习CSS+DIV一直到能独立完成 ...

  3. CSS继承性+层叠性+盒子+浮动

        CSS继承性+层叠性+盒子+浮动 CSS继承性 <style>         div{             color: pink;             font-siz ...

  4. CSS中层叠和继承的概念。

    继承 CSS的某些样式是具有继承性的,那么什么是继承呢?继承是一种规则,它允许样式不仅应用于某个特定html标签元素,而且应用于其后代.比如下面代码: 1 2 3 4 5 6 7 8 9 <ht ...

  5. css的层叠性+继承性+优先级+权重

    一.层叠性 1.含义 多种css样式叠加,浏览器处理冲突的能力. 2.原则 1>一般情况下,若出现冲突,会按照css的书写顺序,以最后的样式为准 2>样式不冲突,就不会层叠 二.css的继 ...

  6. css中position:relative的真正理解

    其实话说一直以来也没真正去理解好position:relative的用法的真实意义. 我想很多人实实在在用的多都是position:relative和position:absolute结合起来一起用的 ...

  7. 转: CSS中float和clear的理解

    float:浮动,比如,默认的,我们知道,div是占满一行的,现在我们想把两个div显示在一行上,那怎么办呢<div style="width:100px;">1111 ...

  8. 关于C#中Thread.Join()的一点理解

    原文地址:http://www.cnblogs.com/slikyn/articles/1525940.html 今天是第一次在C#中接触Thread,自己研究了一下其中Thread.Join()这个 ...

  9. CSS中层叠和CSS的7阶层叠水平（上篇）

    今天搜索资料时,忽然发现了以前没注意的一个知识点,所以拖过来搞一搞,这个知识点叫做CSS的7阶层叠水平 在说这个知识之前,我们必须要先了解一个东西以便于我们更好的理解CSS的7阶层叠水平 这个东西就是 ...

随机推荐

  1. 在浏览器中体验 Ubuntu

    近日,Canonical将Ubuntu官网中添加了在线导览的功能,你可以在任何地方使用这个Ubuntu 演示版.Ubuntu背后的公司Canonical为 Linux 推广做了很多努力.无论你有多么不 ...

  2. atitit.微信支付的教程文档 attilax总结

    atitit.微信支付的教程文档 attilax总结 1. 支付流程概览 1 2. 设置支付起始文件夹   host/app/paydir/ 1 3. 设置oauth验证域名 1 4. 測试文件夹 能 ...

  3. 从服务端架构设计角度，深入理解大型APP架构升级

    随着智能设备普及和移动互联网发展,移动端应用逐渐成为用户新入口,重要性越来越突出.但企业一般是先有PC端应用,再推APP,APP 1.0版的功能大多从现有PC应用平移过来,没有针对移动自身特点考虑AP ...

  4. maven modules

    所有用Maven管理的真实的项目都应该是分模块的,每个模块都对应着一个pom.xml.它们之间通过继承和聚合(也称作多模块,multi-module)相互关联.那么,为什么要这么做呢?我们明明在开发一 ...

  5. java数据库操作：JDBC的操作

    1,JDBC注意操作类及接口: 数据库操作过程: 1)打开数据库服务 2)连接数据库:一般都要输入用户名,密码, 3)操作数据库:创建表:查询表,更新,记录. 4)关闭数据库. 1,DriverMan ...

  6. c#导出到excel的几种解决方案

    (一)传统操作Excel遇到的问题: 1.如果是.NET[使用office组件Microsoft.Iffice.interop.Excel的话],需要在服务器端装Office,且及时更新它,以防漏洞, ...

  7. 实现对数据进行分组小计并计算合计的实例 asp.net

    可以通过数据绑定来实现  通过union all 来实现数据库 SELECT * FROM v3_pay_list2 where ( (ought_date >= '2012-12-06') a ...

  8. PL/SQL TOAD 不安装Oracle客户端连接数据库的方法

    不安装Oracle客户端连接数据库的方法 本机环境: win7 64位中文旗舰版 一.准备工作: 1)到ORACLE官网下载instantclient,下载地址:http://www.oracle.c ...

  9. （41）JS运动之右側中间悬浮框（对联悬浮框）

    <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title> ...

  10. HTTP Cache怎样计算Age

    这里的Age指的是响应头Age.以下内容有部分翻译,也有部分自己的理解.欢迎讨论. 我们用now表示当前主机的当前时间,用request_time表示缓存发起请求的时间,用response_time表 ...