CSS--结构和层叠
选择器的特殊性
特殊性值表述为4个部分，如0,0,0,0。具体特殊性如下所示：
举例说明一下：
通配符选择器的特殊性
通配符选择器其特殊性为0,0,0,0
!important重要性
大家都知道内联样式的特殊性最高，如果在一个样式声明最后也就是分号结束之前插入!important来标志它的重要性，它将会最终应用到元素上的样式，当然它遵循后面声明的冲突样式会覆盖前面的。如下代码中h5标签最终的颜色为blue
<style type="text/css">
h5 {
color:green !important;
}
h5 {
color:blue !important;
}
</style> <body>
<h5 style="color:red;">43254382543</h5>
</body>
样式的继承
样式的继承是需要注意两点：
1、有些属性是不能继承
2、继承的值根本没有特殊性，甚至连0特殊性也没有
大家仔细看如下例子，发现em标签最终应用的是继承的属性color:gray，这也正好说明了0特殊性比无特殊性要强。这也说明了不加区别的使用通配符选择器可能存在的问题之一。
<head>
<style type="text/css">
* {
color: gray;/*通配符选择器适用于所有元素，而且有0特殊性 其颜色声明指定的值gray要优先继承值*/
} h1#page-title {
color: black;
}
</style>
</head>
<body>
<h1 id="page-title">Meerkat <em>Central</em>
</h1>
<p>
Welcome to the best place on the web for meerkat information!
</p>
</body>
层叠
层叠规则如下：
权重规则
解释一下LVHA顺序
上面已经讲过应用样式的顺序1、比较权重2、比较特殊性3、比较顺序
如果我们声明a的相关伪类的顺序如下所示：
那么正在“点击”的未访问的链接可以与其中的3个规则匹配:link,:hove,:active 所以在这三个规则当中最后一个声明的:active将胜出。
其实:link和:visited没有顺序之分且:hover和:active也没有顺序之分
只要:link和:visited这一组合在:hover和:active这一组合前面就不会出现错乱。
CSS--结构和层叠的更多相关文章
- Web前端新人笔记之CSS结构和层叠
上一篇文章介绍了如何利用CSS选择器为元素应用各种丰富的样式,每个合法的文档都会生成一个结构树,了解这一点,就能根据元素的祖先.属性.兄弟等元素穿件选择器选择元素. 本篇文章将讨论3中机制之间的关系: ...
- CSS结构和层叠
每个合法的文档都会生成一个文档树,从而能根据元素的祖先,属性,兄弟元素等创建选择器来选择元素.有了这个结构树,选择器才能起作用,这也是CSS继承的核心.继承是从一个元素向其后代元素传递属性值所采用的机 ...
- CSS基础知识—【结构、层叠、视觉格式化】
结构和层叠 选择器的优先级顺序: style[内联元素]选择器>Id选择器>类选择器 属性选择器>元素选择器>通配器选择器 重要性:@important 有这个标记的属性值,优 ...
- 深入理解CSS中的层叠上下文和层叠顺序(转)
by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu.com/wordpress/?p=5115 零.世间的道 ...
- 深入理解CSS中的层叠上下文和层叠顺序
零.世间的道理都是想通的 在这个世界上,凡事都有个先后顺序,凡物都有个论资排辈.比方说食堂排队打饭,对吧,讲求先到先得,总不可能一拥而上.再比如说话语权,老婆的话永远是对的,领导的话永远是对的. 在C ...
- CSS权威指南 - 层叠
CSS权威指南 第三章结构与层叠 - 层叠 按权重及来源排序 1. Reader important declarations 2. Author important declarations 3. ...
- [转]深入理解CSS中的层叠上下文和层叠顺序
http://www.zhangxinxu.com/wordpress/2016/01/understand-css-stacking-context-order-z-index/ 零.世间的道理都是 ...
- 初学者用div+css结构写网页的几个误区
1.用div+css结构制作静态html网页不等于彻底抛弃古老的table写法.之所以不建议用table来布局网页是因为在网页加载很慢的时候要等table结构加载完成才能看到网页,其次是table的布 ...
- css优先级和层叠
css优先级和层叠 1.优先级 计算方法: a.行内样式 b.id选择器的数量 c.类,伪类和属性选择器的数量 d.标签选择器和伪元素选择 ...
- CSS中的层叠、特殊性、继承、样式表中的@import
CSS中的层叠.特殊性.继承.样式表中的@import 层叠 CSS有一个机制是层叠,层叠可以理解为对样式的覆盖,优先性为: 网站开发者的样式表 用户样式(通过设置浏览器的显示选项) 浏览器默认的样式 ...
随机推荐
- 基于DDD的.NET开发框架 - ABP模块设计
返回ABP系列 ABP是“ASP.NET Boilerplate Project (ASP.NET样板项目)”的简称. ASP.NET Boilerplate是一个用最佳实践和流行技术开发现代WEB应 ...
- 学堂在线 UWP 首版
好久没有写博客了,主要是最近在写一个小小的App.<(￣︶￣)> 不知道看各位有木有爱看慕课的,作为一名资深的大三学渣的我有看慕课的习惯.一直在看学堂在线的慕课,感觉质量确实还可以,但是遗 ...
- .Net下一个类型转换神器
引言 类型转换经常遇到,最常用的应该是string类型转换为其它基元类型,常见于http参数类型转换.Convert静态类的Convert.ChangeType()方法可以把实现IConvertibl ...
- .Net分布式异常报警系统-服务端站点管理
管理站点 对于管理站点, 并没有太复杂的内容, 主要就是对数据库表中的数据进行维护. 管理的实体有3个 WebSite(站点信息), WebService(站点服务器信息), ErrorEntity ...
- P和NP问题
1. 通俗详细地讲解什么是P和NP问题 http://blog.sciencenet.cn/blog-327757-531546.html NP----非定常多项式(英语:non-determin ...
- MATLAB中subplot的用法
写成subplot(m,n,p)或者subplot(mnp). subplot是将多个图画到一个平面上的工具.其中,m表示是图排成m行,n表示图排成n列,也就是整个figure中有n个图是排成一行的, ...
- grub.conf文件参数详解
Grub是Linux的下系统启动器之一(另一个名为Lilo),grub.conf相当于 windows下的boot.ini,都是存放启动项设置和信息的,如果你熟悉boot.ini的设置的话相信也可以很 ...
- 51-du 显示关于目录层次结构或文件磁盘使用情况的信息
显示关于目录层次结构或文件磁盘使用情况的信息 du [options] [path-list] 参数 不带任何参数的du将显示工作目录及其子目录磁盘使用情况的信息,path-list指定要获取磁盘占用 ...
- 15-grep 简明笔
在文件中搜索模式 grep [options] pattern [file-list] 参数 pattern为正则表达式,file-list为grep要搜索的普通文本文件的路径名列表 选项 -c ...
- 360demo--关于WM_GETMINMAXINFO
在duilib的demo中,看到这么一段: LRESULT OnGetMinMaxInfo(UINT uMsg, WPARAM wParam, LPARAM lParam, BOOL& bHa ...