首先声明一下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. sql2005-数据库备份方案 (转载)

    sql2005数据库备份一般情况分为二种:一是手工备份.二是自动备份.以下是二种方法的步骤: 一.手工备份 打开数据库,选择要备份数据库,右键选择[任务]->[备份],打开备份数据库页面,在[源 ...

  2. Android 编程下判断当前设备是手机还是平板

    /** * 判断当前设备是手机还是平板,代码来自 Google I/O App for Android * @param context * @return 平板返回 True,手机返回 False ...

  3. Unicode编码

    Unicode为世界上所有的文字系统的每一个字符单位分配了一个唯一的整数,称为代码点,范围为:0~1114111: ASCII将每一索引映射为唯一的二进制表示,但Unicode允许多个不同二进制编码的 ...

  4. this和$(this)区别

    This代表当前元素,是javascript关键词中的一个,表示上下文中的当前DOM元素,不能调用Jquery方法: $(this)返回一个Jquery对象,可调用多个方法.

  5. 模拟 POJ 1068 Parencodings

    题目地址:http://poj.org/problem?id=1068 /* 题意:给出每个右括号前的左括号总数(P序列),输出每对括号里的(包括自身)右括号总数(W序列) 模拟题:无算法,s数组把左 ...

  6. HUST1024 dance party(最大流)

    题目大概说有n男n女,男的每回合要和不同女的跳舞,男女都有自己喜欢一起跳舞的对象,他们最多能容忍和k个不喜欢的人跳舞,问舞会最多能进行几个回合. 二分枚举回合用最大流判断:男和女各拆成两点i.i'和j ...

  7. BZOJ4347 : [POI2016]Nim z utrudnieniem

    将石子从小到大排序,然后DP. 设$f[i][j][k]$表示考虑了前$i$堆的石子,当前扔掉的堆数模$d$为$j$,没有扔掉的石子的异或和为$k$的方案数. 因为石子排过序,所以转移的复杂度为$O( ...

  8. 【TYVJ】1467 - 通向聚会的道路(spfa+特殊的技巧)

    http://tyvj.cn/Problem_Show.aspx?id=1467 这题我并不是看题解a的.但是确实从题解得到了启发. 一开始我就想到一个正解,设d[i][0]表示i开始走过奇数个点的最 ...

  9. 诅咒JavaScript之----ArcGIS JavaScript 点聚合 ClusterLayer

    对一个之前一直做winForm的 菜鸟来说,突然接触这么神奇的语言,基本上每天都会诅咒一下这门神奇的语言. 最近做了一个小网站,底图用的是天地图的服务,用ArcGIS JavaScript提供的一些G ...

  10. smarty模板中literal标签的使用

    在使用的时候把js等代码写在模板中就报错,加入literal标签后就正确了 <style> {literal} .tr_color{background-color: #9F88FF} { ...