CSS层叠和继承
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层叠和继承的更多相关文章
- CSS 层叠与继承
三种继承css方式 1.段内继承 <p style="color: red;font-size:50px;">样式原文</p> 原文变成 红色, 原文字体变 ...
- CSS特性: 继承 和 层叠
在css中也存在着继承关系,与面向对象的编程语言不同,css的继承很简单,而且主要指的是在CSS盒模型中,外围的盒子的样式会被内部所包含的盒子所继承.具体来了解一下. HTML元素之间存在一个”树型“ ...
- CSS学习摘要-层叠和继承
当有多个选择器作用在一个元素上时,哪个规则最终会应用到元素上? 其实这是通过层叠机制来控制的,这也和样式继承(元素从其父元素那里获得属性值)有关. 元素的最终样式可以在多个地方定义,它们以复杂的形式相 ...
- CSS核心内容:层叠和继承
实际的工作中,当有多个选择器作用在一个元素上时,哪个规则最终会应用到元素上?其实这是通过层叠机制来控制的,这也和样式继承(元素从其父元素那里获得属性值)有关.样式的优先级就是这样的一个机制,它包括!i ...
- CSS层叠
前面的话 层叠样式表CSS最基本的一个特性就是层叠.冲突的声明通过层叠进行排序,由此确定最终的文档表示.而这个过程的核心就是选择器及其相关声明的特殊性.重要性.来源及继承机制.本文将详细介绍CSS层叠 ...
- css层叠选择
首先声明一下CSS三大特性——继承.优先级和层叠.继承即子类元素继承父类的样式,比如font-size,font-weight等f开头的css样式以及text-align,text-indent等t开 ...
- css层叠规则,优先级算法
前言 层叠样式表CSS最基本的一个特性就是层叠.冲突的声明通过层叠进行排序,由此确定最终的文档表示.而这个过程的核心就是选择器及其相关声明的特殊性.重要性.来源及继承机制.本文将详细介绍CSS层叠 特 ...
- CSS学习笔记03 CSS层叠性、继承性、特殊性
层叠性 所谓层叠性是指多种CSS样式的叠加,也就是说后面设置的样式会层叠(覆盖)之前的样式,层叠性的前提是CSS的选择器的优先级相同,例如,当使用内嵌式CSS样式表定义<p>标记字号大小为 ...
- css层叠性和继承性
1.了解css层叠性 层叠性是什么?就是解决处理css选择器和属性冲突的能力.css的选择器权重是分大小,就是当多个选择器都选中了同一个标签时,听谁的??? 标签选择器 < 类选择器 < ...
随机推荐
- mpi中程序在集群中的分发
我们在开发mpi程序时,由于其是分布式程序,我们在单个节点上完成编码后,需要将代码拷贝到整个集群进行测试.集群之间的文件拷贝可以通过scp命令完成.但是scp命令是针对两个节点之间文件互传设计,为了将 ...
- RAC 10g administration
10g RAC administration See OCFS Oracle Cluster Filesystem, ASM, TNSnames configuration, Oracle Datab ...
- 为CCB中的Sprite子类化CCSprite的一个问题
这时一个特定的错误发生在运行app或者loading场景的时候: reason: '[<NameOfClass 0x7a043520> setValue:forUndefinedKey:] ...
- Hadoop 数据排序(一)
1.概述 1TB排序通常用于衡量分布式数据处理框架的数据处理能力.Terasort是Hadoop中的的一个排序作业.那么Terasort在Hadoop中是怎样实现的呢?本文主要从算法设计角度分析Ter ...
- java的参数传递与内存分配问题
本文可作为北京尚学堂java课程的学习笔记. 看下面这段代码. class BirthDate { private int day; private int month; private int ye ...
- NIO模式例子
NIO模式主要优势是体现在对多连接的管理,对众多连接各种事件的转发让处理变得更加高效,所以一般是服务器端才会使用NIO模式,而对于客户端为了方便及习惯使用阻塞模式的Socket进行通信.所以NIO模式 ...
- 【LaTeX排版】LaTeX使用--入门基础<一>
经过两个多星期,毕业论文终于写完了.由于自己对Word软件并不是很熟悉,再加上在数模时见识过LaTex的强大之处,于是就决定用LaTex进行论文的排版.使用LaTex可以避免像Word那样换台机器而出 ...
- 使用 Linux 的 strace 命令跟踪/调试程序的常用选项
原文:http://linoxide.com/linux-command/linux-strace-command-examples/作者: Raghu 在调试的时候,strace能帮助你追踪到一个程 ...
- eclipse下出现奇怪字符的解决方法
eclipse在代码编辑界面出现了奇怪的字符,如下图: 其中包括:换行符,制表符等. 解决方法如下: 点击工具栏的显示空格字符即可.
- 高斯混合模型和EM算法
使用期望最大化算法(Expectation-Maximization)来进行密度估计(density estimation). 与k-means一样,给定的训练样本是,我们将隐含类别标签用表示.与k- ...