CSS——选择器的优先级
所谓CSS优先级，即是指CSS样式在浏览器中被解析的先后顺序。样式表中的特殊性描述了不同规则的相对权重。
!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性 1 内联样式表的权值最高 style="" 1000； 2 统计选择符中的ID属性个数。 #id 100 3 统计选择符中的CLASS属性个数。 .class 10 4 统计选择符中的HTML标签名个数。 标签名 1 按这些规则将数字符串逐位相加，就得到最终的权重，然后在比较取舍时按照从左到右的顺序逐位比较。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title> <style>
.c1{
color: red;
}
#i1{
color: coral;
}
div{
color: greenyellow;
} /*.c2 .c3 .c4 span{*/
/* color: orange;*/
/*}*/ .c2 .c4 span{
color: blue;
} .c2 .c3 .c5{
color: rebeccapurple;
} .c2 .c4 .c5{
color: darkcyan;
} </style> </head>
<body> <div class="c1" id="i1">item1</div> <div class="c2">
<div class="c3">
<div class="c4">
<span class="c5">item2</span>
</div>
</div>
</div> </body>
</html>
1、有!important声明的规则高于一切。 2、如果!important声明冲突，则比较优先权。 3、如果优先权一样，则按照在源码中出现的顺序决定，后来者居上。 4、由继承而得到的样式没有specificity的计算，它低于一切其它规则(比如全局选择符*定义的规则)。 5、用数字表示只是说明思想，一万个class也不如一个id权值高
CSS——选择器的优先级的更多相关文章
- CSS选择器以及优先级与匹配原理
最常用的五类CSS选择器 准确而简洁的运用CSS选择器会达到非常好的效果.我们不必通篇给每一个元素定义类(class)或ID,通过合适的组织,可以用最简单的方法实现同样的效果.在实际工作中,最常用的选 ...
- CSS选择器、优先级与匹配原理（转）
CSS选择器.优先级与匹配原理 导航 为了分析Bootstrap源码,所以的先把CSS选择器相关的东东给巩固好 废话就不多说了 CSS 2.1 selectors, Part 1 计算指定选择器的优先 ...
- 详解CSS选择器、优先级与匹配原理
原文链接:http://polaris1119.javaeye.com/blog/764428 作为一个Web开发者,掌握必要的前台技术也是很重要的,特别是在遇到一些实际问题的时候.这里给大家列举一个 ...
- 转载：详解CSS选择器、优先级与匹配原
转载网址:http://polaris1119.javaeye.com/blog/764428 文章就CSS选择器的优先级问题做了一些总结,严格来讲,选择器的种类可以分为三种:标签名选择器.类选择器和 ...
- CSS选择器、优先级和匹配原理
作为一个Web开发者,掌握必要的前台技术也是很重要的,特别是在遇到一些实际问题的时候.这里给大家列举一个例子: 给一个p标签增加一个类(class),可是执行后该class中的有些属性并没有起作用.通 ...
- 详解CSS选择器、优先级与匹配原理【转】
作为一个Web开发者,掌握必要的前台技术也是很重要的,特别是在遇到一些实际问题的时候.这里给大家列举一个例子: 给一个p标签增加一个类(class),可是执行后该class中的有些属性并没有起作用.通 ...
- （转）css选择器及其优先级
文章主要介绍什么是CSS选择器,CSS选择器的分类以及CSS选择器的优先级三部分内容,希望能够帮助到正在学习CSS的童鞋,有什么不足的地方欢迎大家批评指正. 一.什么是CSS选择器? CSS选择器又被 ...
- CSS 选择器及优先级
CSS 选择器及优先级 1.根据权值计算 div .class1 #people的权值等于1+10+100=111 .class2 li #age的权值等于10+1+100=111 2.权值相同,那么 ...
- CSS选择器、优先级与匹配原理
为了分析Bootstrap源码,所以的先把CSS选择器相关的东东给巩固好 废话就不多说了 CSS 2.1 selectors, Part 1 计算指定选择器的优先级:重新认识CSS的权重 标签的权值为 ...
- CSS选择器及其优先级
一:一些普通的选择器 <!DOCTYPE html> <html> <head lang="en"> <meta charset=&quo ...
随机推荐
- redis 简单整理——哨兵原理[三十一]
前言 简单介绍一下哨兵的原理. 正文 一套合理的监控机制是Sentinel节点判定节点不可达的重要保证,Redis Sentinel通过三个定时监控任务完成对各个节点发现和监控: 1)每隔10秒,每个 ...
- mmcls 多标签模型部署在torch serve
GitHub仓库:gy-7/mmcls_multi_label_torchserve (github.com) 各个文件说明: cls_requests_demo:分类模型请求api服务的demo d ...
- 基于ChatGPT打造安全脚本工具流程
前言 以前想要打造一款自己的工具,想法挺好实际上是难以实现,第一不懂代码的构造,只有一些工具脚本构造思路,第二总是像重复造轮子这种繁琐枯燥工作,抄抄改改搞不清楚逻辑,想打造一款符合自己工作的自定义的脚 ...
- 从源码入手详解ReentrantLock，一个比synchronized更强大的可重入锁
写在开头 随手一翻,发现对于Java中并发多线程的学习已经发布了十几篇博客了,多线程 是Java基础中的重中之重!因此,可能还需要十几篇博客才能大致的讲完这部分的知识点,初学者对于这部分内容一定要多花 ...
- 力扣596(MySQL)-超过5名学生的课（简单）
题目: 表: Courses 编写一个SQL查询来报告 至少有5个学生 的所有班级. 以 任意顺序 返回结果表. 查询结果格式如下所示 示例1: 解题思路: 使用group by按 班级 进行分组后 ...
- 力扣21(java&python)-合并两个有序链表（简单）
题目: 将两个升序链表合并为一个新的 升序 链表并返回.新链表是通过拼接给定的两个链表的所有节点组成的. 示例 1: 输入:l1 = [1,2,4], l2 = [1,3,4] 输出:[1,1,2,3 ...
- PolarDB-X迎来开源后首个重大版本升级，2.1版本新增5大特色功能
简介:2022 年 5 月25日,阿里云开源 PolarDB-X 升级发布新版本!PolarDB-X 从 2009 年开始服务于阿里巴巴电商核心系统, 2015 年开始对外提供商业化服务,并于 20 ...
- Flink 在唯品会的实践
简介: Flink 在唯品会的容器化实践应用以及产品化经验. 唯品会自 2017 年开始基于 k8s 深入打造高性能.稳定.可靠.易用的实时计算平台,支持唯品会内部业务在平时以及大促的平稳运行.现平台 ...
- 基于 MaxCompute 的实时数据处理实践
简介: MaxCompute 通过流式数据高性能写入和秒级别查询能力(查询加速),提供EB级云原生数仓近实时分析能力:高效的实现对变化中的数据进行快速分析及决策辅助.当前Demo基于近实时交互式BI ...
- [FAQ] IDE: Goland 注释符后面添加空行
如图所示,Code Style 对应语言 Go 勾选上注释空行的选项. Refer:Goland官网 Goland下载 Link:https://www.cnblogs.com/farwish/p/1 ...