首先声明一下CSS三大特性——继承、优先级和层叠。继承即子类元素继承父类的样式，比如font-size,font-weight等f开头的css样式以及text-align,text-indent等t开头的样式以及我们常用的color。简单的就不演示了，强调一下font-size这个东东(虽然也有继承，但是标签不同继承的效果也不一样)，比如下面的代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        .fonts {

            font-size: 20px;

        }

    </style>

</head>

<body>

    <div class="fonts">

        <p id="p">我的字体大小为20px</p>

        <h1 id="h1">我的字体大小为40px</h1>

    </div>

</body>

</html>

我给p和h1标签的父元素div设一个font-size为20px，p没有问题，继承了div的20px，但h1却变为了40px，我们从下面的JS代码可以获取。

为什么h1会是40px呢？因为h1的默认样式为2em（32px）,如下图

，

并且h1默认的font-size为200%，因为div设了20px，所以通过继承h1的最终font-size为20*2=40px，要想使h1的标签字体大小也等于父标签div，只需设置h1 {font-size:100%;},如下图所示：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        .fonts {

            font-size: 20px;

        }

        h1 {

            font-size: 100%;

        }

    </style>

</head>

<body>

    <div class="fonts">

        <p id="p">我的字体大小为20px</p>

        <h1 id="h1">我的字体大小为20px</h1>

    </div>

</body>

</html>

下面我们再一起聊聊优先级这玩意，

!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性

额，好像有点复杂。那我们通过以下几个例子来证明吧。

方法——先看选择器是否命中对应的标签，命中后再根据权重来进行判断，权重的意思是数标签的数量，通过比较ID 类 标签 这三种选择器的数量来决定谁的优先级最高。当数量相同时，通过层叠（后者覆盖前者）来决定。

最后显示绿色，因为虽然!important优先级最高，但是没有继承性，li的颜色继承自ul.

答案是yellow，因为三者都可以命中元素，所以通过权重判断，第一个没有ID选择器PASS掉，第二个和第三个一样，通过层叠（第三覆盖第二）决定颜色。

html是一个嵌套了12个div的复杂盒子，最里面的div有me这个类，判断方法：都可以命中元素，所以通过权重，类选择器>元素选择器，所以选择blue.

都可以命中对应元素，权重第一个大于第二个（比较标签选择器数量），显示blue.

先通过是否命中对应元素排除第四和第五个样式，然后根据权重比较一二三——第一个： 两个ID ;第二个：一个ID一个类;第三个：两个类。所以根据权重ID>类 ，最后显示blue.

答案是blue，第二个没有命中PASS掉，第一个和第三个比较权重，由于第一个没有类，所以答案是blue。

最后总结一下优先级、层叠与权重的关系——

层叠是css的一个特性，如果两个相同的属性作用于同一标签，它们会发生层叠。如果多个复合选择器，同时作用于我们的同一标签，优先级就不好计算了，就要计算权重，通过比较权重，来先出优先级最高的选择器。

如何计算权重：

（数标签的数量）先数id,如果id相等再数类如果id不相等id多的选择器权重高，权重越高，优先级越高。如果id选择器数量相同，再数类选择器，最后数标签。

注意：比较权重的时候一定要注意：我们的选择器一定要命中对应的标签才可能让标签拥有对应的属性。

个人阅后总结：先判断css样式是否命中，如命中则判断各自的权重（按照选择器等规则）

转自：http://www.cnblogs.com/ssh-007/p/5043923.html

css层叠选择的更多相关文章

  1. CSS层叠

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

  2. CSS 层叠及样式表来源

    Web标准化运动的口号——分离.分离.分离. 在2003年的 SXSW 会议中, Steve Champeon 和 Nick Finck 做了一个名为“面向未来的全方位 Web 设计”的演讲,揭示了这 ...

  3. css层叠机制说明

    css通过建立与文档的关联而实施效果.文档结构重要性不言而喻,对于建立良好的内容索引.提高可维护性.较好的可访问性:另,利于css选择器选择.继承机制. 概要地讲,层叠机制是处理对文档上应用样式时解决 ...

  4. CSS层叠和继承

    CSS具有两个核心的概念--继承和层叠.一般文本类的属性会被继承,即某个元素的CSS属性会传递给内部嵌套的元素.一个元素可能有一个或者多个样式的来源,当属性发生冲突时,就会根据加载顺序和权重大小决定层 ...

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

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

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

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

  7. 盒模型 | CSS权重 | CSS层叠

    span{ color:red;} *{ font-family:"楷体";line-height:2em; font-size:18px;} 盒模型 CSS定义所有的元素都可能拥 ...

  8. css层叠规则（层叠样式表）

    CSS层叠规则: 1.找出所有相关的规则,这些规则都包含与一个给定元素匹配的选择器. 2.按权重(!important)和来源对应用到给定元素的所有声明进行排序. 3.按特殊性对应用到给定元素的所有声 ...

  9. 只用CSS美化选择框

    只用CSS美化选择框 2012-03-02 11:04 by iBlog, 26240 阅读, 14 评论, 收藏, 编辑 <本文译自Style a Select Box Using Only ...

随机推荐

  1. WinForm点击按钮，访问百度

    命名空间 using System.Diagnostics; button的click事件中写入如下 Process.Start("http://www.xxx.com"); 注: ...

  2. Javac早期(编译期)

    从Sun Javac的代码来看,编译过程大致可以分为3个过程: 解析与填充符号表过程. 插入式注解处理器的注解处理过程. 分析与字节码生成过程. Javac编译动作的入口是com.sun.tools. ...

  3. Python实践：提取文章摘要

    一.概述 二.纯文本摘要 三.HTML摘要 一.概述 在博客系统的文章列表中,为了更有效地呈现文章内容,从而让读者更有针对性地选择阅读,通常会同时提供文章的标题和摘要. 一篇文章的内容可以是纯文本格式 ...

  4. BFS+模拟 ZOJ 3865 Superbot

    题目传送门 /* BFS+模拟:dp[i][j][p] 表示走到i,j,方向为p的步数为多少: BFS分4种情况入队,最后在终点4个方向寻找最小值:) */ #include <cstdio&g ...

  5. 水题 ZOJ 3876 May Day Holiday

    题目传送门 /* 水题:已知1928年1月1日是星期日,若是闰年加1,总天数对7取余判断就好了: */ #include <cstdio> #include <iostream> ...

  6. 删除mysql

    我以前遇到过删除mysql如果删除不干净的话,下次无法安装,也无法启动服务. 如今找到了解决方案 前言:只适用在Windows下--在控制面板中删除MySQL程序--然后在C盘中删除MySQL文件夹- ...

  7. 使用X-UA-Compatible来设置IE8/IE9兼容模式

    文件兼容性用于定义让IE如何编译你的网页.此文件解释文件兼容性,如何指定你网站的文件兼容性模式以及如何判断一个网页该使用的文件模式. 前言 为了帮助确保你的网页在所有未来的IE版本都有一致的外观,IE ...

  8. Web 设计新趋势: 使用 SVG 代替 Web Icon Font

    如果你还在使用 Icon Font 作为网页中显示图标的实现方案,那么你可能有点 Out 了. 由于使用 Icon Font 显示图标存在一些缺陷,开发者们一直在致力于探索使用 SVG 作为替代的方法 ...

  9. java不用jni，也可以获得当前系统性能信息

    最近做个项目,就是要取得cpu占有率等等的系统信息,一开始以为要用动态链接库了,但后来发现可以像下面这样做,不去调用jni,这样省去了很多看新技术的时间o(∩_∩)o... 在Java中,可以获得总的 ...

  10. 遍历josn的三种方式

    第一种:使用for循环 js代码: function CyclingJson1() { var testJson = '[{ "name": "小强", &qu ...