【学习笔记】CSS优先级规则
CSS的优先级规则很多地方的说法都是错误的,常见错误说法是inline css>内部样式>外部样式,其实并没有这种规定。真正的CSS优先级确定是通过特性值大小确定的,在特性值大小相同的情况下,哪个样式出现在最后采用哪个样式。
在大型复杂系统或css样式太多的情况下,同一个元素可能有多个css样式能够指定,但最终只有一种样式能够真正使用,这时我们就需要通过特性值大小来确定采用何种样式了。(注:css样式书写推荐使用层级嵌套,明确的层级嵌套能够更好得给我们希望的元素设置样式,预防出现奇怪的样式冲突问题)。
真正的优先级规则是指:!important> inline css > id选择器 > class选择器 > tag选择器,假设我们给定 inline css 权重为A,id选择器权重为B,class选择器权重为C,tag选择器权重为D。那么存在A>B>C>D这种关系,且n个B(C,D)无论怎么加永远小于A(B,C)的权重。(有意思的是有些选择器(Firefox 52.0.2 (64 位)、IE11等)认为class选择器的数量大于255时会超过id选择器,不过这种情况通常不存在,没人写那么多选择器)。在判定一个元素使用哪一个样式时(不包含inline css且没有!important的情况下),先比较多个样式中A权重的多少,如果一样再比较B,直到比较到D为止,如果ABCD都一样,使用最后引用的那个样式。(我们通常说内部样式>外部样式通常是因为内部样式引用顺序在外部样式引用顺序之后,其实这两种方式根本就没有优先级关系,只有先后关系)。(还有一点,真正上我们并不区分内部样式和外部样式,硬要区分的话才做划分)。
有个先后顺序确定优先级的比较好的例子:我们知道a标签有四种状态:链接访问前、链接访问后、鼠标滑过、激活,分别对应四种伪类:link、:visited、:hover、:active,并且这四个伪类如果对同一个元素设置同一个属性,那它们的声明顺序还有一定要求,一般大家都遵循“LVHA”(爱恨原则love hate)。根据css优先级计算规则,伪类的特殊性值是C,4个伪类的特殊性值相同,那么后面声明的规则优先级高。当鼠标滑过a链接时,满足:link和:hover两个伪类,要改变a标签的颜色,就必须将:hover伪类在:link伪类后面声明;同理,当鼠标点击激活a链接时,同时满足:link、:hover、:active三种状态,要显示a标签激活时的样式(:active),必须将:active声明放到:link和:hover之后。因此得出LVHA这个顺序。这个顺序能不能变?可以,但也只有:link和:visited可以交换位置,因为一个链接要么访问过要么没访问过,不可能同时满足,也就不存在覆盖的问题。
【学习笔记】CSS优先级规则的更多相关文章
- amazeui学习笔记--css(基本样式3)--文字排版Typography
amazeui学习笔记--css(基本样式3)--文字排版Typography 一.总结 1.字体:amaze默认非 衬线字体(sans-serif) 2.引用块blockquote和定义列表:引用块 ...
- amazeui学习笔记--css(布局相关1)--网格Grid
amazeui学习笔记--css(布局相关1)--网格Grid 一.总结 基本使用 1.div+class布局:amaze里面采取的就是div+class的布局方式 <div class=&q ...
- amazeui学习笔记--css(基本样式4)--打印样式Print
amazeui学习笔记--css(基本样式3)--打印样式Print 一.总结 1.打印显示url方法: 利用 CSS3 content 属性,将 <a> 和 <abbr> 的 ...
- amazeui学习笔记--css(基本样式2)--基础设置Base
amazeui学习笔记--css(基本样式2)--基础设置Base 一.总结 1.盒子模型:外margin,内padding,这里的内外指的边框 2.border-box:Amaze UI 将所有元素 ...
- amazeui学习笔记--css(基本样式)--样式统一Normalize
amazeui学习笔记--css(基本样式)--样式统一Normalize 一.总结 1.统一浏览器默认样式: Amaze UI 也使用了 normalize.css,就是让不同浏览器显示相同的样式 ...
- amazeui学习笔记--css(常用组件16)--文章页Article
amazeui学习笔记--css(常用组件16)--文章页Article 一.总结 1.基本使用:文章内容页的排版样式,包括标题.文章元信息.分隔线等样式. .am-article 文章内容容器 .a ...
- amazeui学习笔记--css(常用组件15)--CSS动画Animation
amazeui学习笔记--css(常用组件15)--CSS动画Animation 一.总结 1.css3动画封装:CSS3 动画封装,浏览器需支持 CSS3 动画. Class 描述 .am-anim ...
- amazeui学习笔记--css(常用组件14)--缩略图Thumbnail
amazeui学习笔记--css(常用组件14)--缩略图Thumbnail 一.总结 1.基本样式:在 <img> 添加 .am-thumbnail 类:也可以在 <img> ...
- amazeui学习笔记--css(常用组件13)--进度条Progress
amazeui学习笔记--css(常用组件13)--进度条Progress 一.总结 1.进度条基本使用:进度条组件,.am-progress 为容器,.am-progress-bar 为进度显示信息 ...
- amazeui学习笔记--css(常用组件12)--面板Panel
amazeui学习笔记--css(常用组件12)--面板Panel 一.总结 1.面板基本样式:默认的 .am-panel 提供基本的阴影和边距,默认边框添加 .am-panel-default,内容 ...
随机推荐
- BZOJ_1495_[NOI2006]网络收费_树形DP
BZOJ_1495_[NOI2006]网络收费_树形DP Description 网络已经成为当今世界不可或缺的一部分.每天都有数以亿计的人使用网络进行学习.科研.娱乐等活动.然而, 不可忽视的一点就 ...
- 「LuoguP1430」 序列取数(区间dp
题目描述 给定一个长为n的整数序列(n<=1000),由A和B轮流取数(A先取).每个人可从序列的左端或右端取若干个数(至少一个),但不能两端都取.所有数都被取走后,两人分别统计所取数的和作为各 ...
- [FJOI 2016] 神秘数
[题目链接] https://www.lydsy.com/JudgeOnline/problem.php?id=4408 [算法] 首先考虑一组询问怎样做 : 将数组按升序排序 , 假设我们现在可以表 ...
- 洛谷p1007独木桥
P1007独木桥 题目背景 战争已经进入到紧要时间.你是运输小队长,正在率领运输部队向前线运送物资.运输任务像做题一样的无聊.你希望找些刺激,于是命令你的士兵们到前方的一座独木桥上欣赏风景,而你留在桥 ...
- Module:template
ylbtech-Module: 1.返回顶部 2.返回顶部 3.返回顶部 4.返回顶部 5.返回顶部 6.返回顶部 作者:ylbtech出处:http://ylbtech. ...
- CentOS7.0安装Ceph(jewel)及以上版本
背景 由于docker的Ceph插件rexray对Ceph版本有一定的要求,当Ceph版本为hammer (0.94.10)时,rexray无法成功创建rbd设备.CentOS 7及以上版本,默认安装 ...
- 4.oracle正确卸载步骤
oracle 11g如何完全卸载 方法/步骤1: 停用oracle服务:进入计算机管理,在服务中,找到oracle开头的所有服务,右击选择停止 方法/步骤2: 在开始菜单中,找到oracle-> ...
- Asset Catalog Help (四)---Adding an iOS App Icon Set or Launch Image Set
Adding an iOS App Icon Set or Launch Image Set Organize different resolutions of your app icons and ...
- [工作笔记]JDK版本不同导致的SSL异常
前言 遇到这个问题得说一下笔者的开发环境,笔者所在公司,平时开发用的web容器是jboss,使用的JDK是oracle的JDK,但是测试和生产环境用的是WAS,JDK用的是IBM的JDK,由于项目的不 ...
- 4.2 手写Java PriorityQueue 核心源码 - 实现篇
上一节介绍了PriorityQueue的原理,先来简单的回顾一下 PriorityQueue 的原理 以最大堆为例来介绍 PriorityQueue是用一棵完全二叉树实现的. 不但是棵完全二叉树,而且 ...