CSS规则重要性以及继承、层叠
多个规则中只有一个胜出,那么怎么知道哪一个规则更强呢?答案在于每个选择器的特殊性。对于每个规则,用户代理会计算选择器的特殊性,并将这个特殊性附加到规则中的各个声明。如果一个元素有两个或者多个冲突的属性声明,那么有最高特殊性的声明就会胜出。(这并不是解决冲突的全部。实际上,所有样式冲突的解决都由层叠来处理)。
选择器的特殊性由选择器本身的组件确定。特殊性值表述为4个部分,如:0,0,0,0.一个选择器的具体特殊性如下确定:
对于选择其中给定的各个ID属性值,加0,1,0,0。对于选择其中给定的各个类属性值、属性选择或伪类,加0,0,1,0。伪元素特殊性为0,0,0,1。结合符和通配选择器对特殊性没有任何贡献。
一般地,第一个0是位内联样式声明保留的,它比所有其他声明的特殊性都高。
重要性,有时某个声明可能非常重要,超过了所有其他声明。在这些声明的结束分号之前插入!important来标志、!important总是放在声明的最后,即分号前面。如果一个属性的值可以包含多个关键字,这一点则尤为重要,必须将!important标志放在声明的最后。
实际上,所有!important声明会分组在一起,重要声明的特殊性冲突会再重要声明内部解决,而不会与非重要声明相混。类似地,我们认为所有非重要声明也归为一组,使用特殊性来解决冲突。如果一个重要声明和一个非重要声明冲突,胜出的总是重要声明。
在HTML中,对于向上传播规则有一个例外:应用到body元素的背景样式可以传递到html元素(html是文档的根元素),相应地可以定义其画布。
继承是CSS中最基本的内容之一,除非有必要的理由,否则一般不会特别考虑,正所谓熟视无睹。不过有几点需要记住。
首先,注意有些属性不能继承,这往往归因于一个简单的常识。例如,属性border就不会继承。一般地,大多数框模型都不能继承,其原因是一样的。继承的值根本没有特殊性,设置连0特殊性都没有。这看上去似乎只是理论上不同,不过等你了解到继承值没有特殊性会有什么结果时,就会知道这种差别绝不能忽视。
因为通配选择器适用于所有元素,而且有0特殊性,其颜色声明指定的值gray要优先于继承值,因为继承值根本没有特殊性。
由于它能匹配任何元素,所以通配选择器往往有一种短路继承的效果。这个问题可以解决,不过通常更合理的做法是从一开始就避免不加区别地使用通配选择器,从而从根本上避免这个问题。
如果特殊性相等的两个规则同时应用到同一个元素会怎么样呢。浏览器如何解决这个冲突。h1{color:red;} h1{color:blue}这两个规则的特殊性都是0,0,0,1。所以它们的权重相等,都应当应用到元素。但这是不可能的。
层叠样式表这个名字可能会提供一点提示。CSS所基于的方法就是让样式层叠在一起,这是通过继承和特殊性做到的。1,找到所有相关的规则,这些规则都包含与一个给定元素匹配的选择器。2,按显式权重对应用到该元素的所有声明排序。标志!important的规则的权重要高于没有!important标志的额规则。按来源对应用到给定元素的所有声明排序。共有3种来源:创作人员、读者和用户代理。正常情况下,创作人员的样式要胜过读者的样式。有!important标志的读者样式要强于所有其他样式。3.按特殊性对应到给定元素的所有声明排序。有较高特殊性的元素权重大于有较低特殊性的元素。4,按出线顺序对应用到给定元素的所有声明排序。
正是由于这种按顺序排序,所以才有了通常推荐的链接样式顺序。一般建议按link-visited-focus-hover-active。这些选择器的特殊性都是一样的0,0,1,0。因为它们都有同样地权重、来源和特殊性,因此与元素匹配的最后一个选择器才会胜出。正在点击的未访问链接可以与其中三个规则匹配:link,hover和active所以在这三个规则当中最后声明的而一个将胜出。
转载于:https://www.cnblogs.com/wlxll/p/7474069.html
CSS规则重要性以及继承、层叠相关推荐
- css规则_CSS规则,将使您的生活更轻松
css规则 by Nick Gard 尼克·加德(Nick Gard) CSS规则,将使您的生活更轻松 (CSS rules that will make your life easier) Afte ...
- 封装link或style中的css规则
CSSStyleSheet类型表示的是样式表,包括通过<link>元素包含的样式表和在<style>元素中定义的样式表.这两个元素本身分别是由HTMLLinkElement和H ...
- css规则定义的分类,.css规则定义
文本样式的定义 定义文本样式.保存CSS规则后系统将行动打开"CSS规则定义"对话框. [字体]:选择所需要的字体. [大小]:定义字体大小. [样式]:可选择字体的特殊样式,即& ...
- css规则_控制CSS规则之战
css规则 New web developers are often confused about where to place the rules for their CSS, especially ...
- DreamWeaver CS5 CSS规则定义面板 记录
Dreamweaver 中CSS定义的面板可以实现对CSS的编辑,这里对其中几项不是很熟悉的作下笔记: 因为时间珍贵,所以很大一部分都是转自网络的内容.而且对于这些内容,别人已经整理的很好了,没有必要 ...
- [转载] CSS模块化【封装-继承-多态】
第一次听到"CSS模块化"这个词是在WebReBuild的第四届"重构人生"年会上,当时我还想,"哈,CSS也有模块化,我没听错吧?"事实上 ...
- css txt-aline,CSS规则定义.doc
CSS规则定义 CSS规则定义 一.类型 Font-family:字体 font-size:字体大小: xx-small 最小 x-small 较小 small 小 medium 正常(默认值) la ...
- html研究中心,seo研究中心 教程:认识HTML、css的重要性-专业SEO技
掌握HTML.css的重要性-专业SEO初级教程(27) 依据之前的学习,确信大家早就对SEO有着一定的掌握.今天起大伙儿将正式开始SEO的学习.看到这里一些朋友或许有那般的疑虑,大伙儿并并不是要学习 ...
- CSS基础工作原理(一)——css规则与选择符器
css规则 为文档添加样式的三种方法:行内样式.嵌入样式.链接样式(此处按优先级排序) <div style="display:block">123</div&g ...
最新文章
- [Offer收割]编程练习赛63
- hash算法_一致性hash算法简介
- Ubuntu下mysql字符集设置
- window.showModalDialog弹出模态窗口
- codeforces741C Arpa’s overnight party and Mehrdad’s silent entering(二分图)
- linux查看终端进程,Linux查看进程
- 【TensorFlow】笔记1:入门笔记
- [状压dp]洛谷 P2157 学校食堂
- 高级短链接工具+汉化版语言包premium-url-shortener-v5.9.8完美修复开心版QW提示跳转
- grafana + influxdb + telegraf , 构建性能监控平台
- 常用linux命令及图解(实践文档,小白都可以看得懂)
- 最简单方法远程调试Python多进程子程序
- kubeedge集群搭建
- 腾讯历届笔试题(1)
- python全栈工程师知识框架_全栈工程师的知识结构
- C语言程序static改错题,2014计算机二级C语言程序设计全真测试题
- cgroup使用举例和linux内核源码详解
- 联邦学习实战-2-用FATE从零实现横向逻辑回归
- CKH IOD选择通过CSG增强其数字批发和物联网客户体验
- Python之Datasets库安装报错的解决方法
热门文章
- vue封装echarts示例
- xpath抓取html不完全,scrapy的xpath是否取HTML标签的情况分析
- linux nfs限制连接数,linux – 对NFS有一个有效的稳定性参数吗?
- python 查找excel内容所在的单元格_使用Python查找Excel单元格引用
- Linux系统和windows系统mysql5.7.32的下载
- python lncrna_分析指令备份.sh
- linux系统可以装win10吗,如何在Win10专业版中安装Linux系统?
- python中分支语句elif与else的区别_浅谈对python中if、elif、else的误解
- 更改mysql数据库存储引擎_MySQL更改数据库表的存储引擎
- python绘制曲线y=2x+5_Python Matplotlib 简易教程