前端一HTML:十五: 层叠,权重,优先级的关系

层叠是css的一个特性,如果两个相同的属性作用于同一标签，它们会发生层叠。

<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style type="text/css">div{  color: pink;}.grandson { font-style: italic;color:blue;}#grandson { color:red;}</style>
</head>
<body><div class="father" id="father"><div class="son" id="son"><div class="grandson" id="grandson">abcdefg</div></div></div>
</body>
</html>

如下:就是3个复合选择器

 <style type="text/css">#father .son div{  /* 1个id选择器,  1个类选择器  1个标签选择器*/color: pink;}#father .son { /* 1个id选择器,  2个类选择器 但是没有直接命中 "abcdefg"  */font-style: italic;color:blue;}.father .son .grandson{  /* 0个id选择器, 3个类选择器 */color:red;}
</style>

如果有多个复合选择器，同时作用于同一标签，优先级就不好计算。这时候就要通过比较权重，来选出优先级最高的选择器。

<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style type="text/css">#father .son div{  /* 1个id选择器,  1个类选择器  1个标签选择器*/color: pink;}#father .son { /* 1个id选择器,  2个类选择器 但是没有直接命中 "abcdefg"  */font-style: italic;color:blue;}.father .son .grandson{  /* 0个id选择器, 3个类选择器 */color:red;}#grandson{    /*  1个id选择器  0个类选择器 */color:brown;}</style>
</head>
<body><div class="father" id="father"><div class="son" id="son"><div class="grandson" id="grandson">abcdefg</div></div></div>
</body>
</html>

层叠是css的一个特性，如果多个选择器同时作用于同一个标签的同一个属性，那么它们之间要发生层叠，这个层叠是由优先级来决定。有时候优先级不能直接通过观察判断出来，如果要比较优先级就要使用权重。

前端一HTML:十五: 层叠,权重,优先级的关系相关推荐

前端学习笔记(十五)
第十五章 HTML5新增标签一.HTML5概述 1.简介 HTML5万维网的核心语言.标准通用标记语言下的一个应用超文本标记语言的第五次大修改.HTML5将成为 HTML.XHTML ...
前端一HTML:十五: 权重的比较
如果选择器混合使用,那么如何确定我们的优先级? 通过权重进行比较. 那么如何计算权重呢? 通过数标签来计算. 先数id选择器的个数,再数类选择器的个数,最后数标签选择器的个数. id选择器个数不相等 ...
“约见”面试官系列之常见面试题之第四十五篇CSS优先级（建议收藏）
官方表述的CSS样式优先级如下: 通用选择器(*) < 元素(类型)选择器 < 类选择器 < 属性选择器 < 伪类 < ID 选择器 < 内联样式那么,我们来举个 ...
C Tricks（十五）—— 算符优先级的表示
不能简单地按照"先左后右"的次序执行表达式中的运算符. 关于运算符执行次序的规则(即运算优先级), 一部分取决于事先约定的惯例(比如乘除优先于加减), 另一部分则取决于括号也就是 ...
前端系列三十五：跨域问题及解决方案
SwitchHosts下载及添加配置: http://test.auclt.baidu.os.com http://test.asclt.baidu.os.com 这里仔细观察会发现请求地址后缀名后三 ...
Web前端学习记录(十五)
写在前面: 由于w小小的失误,这篇其实应该是(十二),害,这件事情说来话长,尽管想改一下名字,但时间的先后没办法呀,只好将错就错了. w:开始表演. y:视而不见. w:······ 实现shoppi ...
【前端学习】前端学习第十五天：JavaScript中的事件模型
在各种浏览器中存在三种事件模型:原始事件模型.DOM事件模型和IE事件模型: 一.原始事件模型: 原始事件模型被所有浏览器支持: 在原始事件模型中.事件一旦发生就直接调用事件处理函数,事件不会向别的对 ...
Web前端入门（十五）CSS背景
总目录文章目录 1.背景颜色 2.背景图像 3.背景平铺 4.背景位置 5.背景附着 6.背景复合写法 7.背景色半透明 8.背景总结通过 CSS 背景属性,可以给页面元素添加背景样式. 背景属性 ...
web前端【第十五篇】popup简单使用（弹出页面）
一.首先说一下自执行函数 1. 立即执行函数是什么?也就是匿名函数立即执行函数就是声明一个匿名函数马上调用这个匿名函数 2.popup的举例点击,弹出一个新的窗口.保存完事,页面不刷新数据就返 ...

前端一HTML:十五: 层叠,权重,优先级的关系

层叠是css的一个特性,如果两个相同的属性作用于同一标签，它们会发生层叠。

如果有多个复合选择器，同时作用于同一标签，优先级就不好计算。这时候就要通过比较权重，来选出优先级最高的选择器。

前端一HTML:十五: 层叠,权重,优先级的关系相关推荐

最新文章

热门文章