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 ...
随机推荐
- HarmonyOS Connect “Device Partner”专场FAQ来啦！
原文链接:https://mp.weixin.qq.com/s/mQJlAso293qgPlA1paxv5g,点击链接查看更多技术内容: Device Partner平台是面向AIoT产业链 ...
- [MAUI]集成富文本编辑器Editor.js至.NET MAUI Blazor项目
@ 目录 获取资源 从源码构建 从CDN获取 获取扩展插件 创建项目 创建控件 创建Blazor组件 初始化 保存 销毁 编写渲染逻辑 实现只读/编辑功能 切换模式 获取只读模式状态 响应切换事件 实 ...
- caidao qsnctfwp
进入网页发现如下内容 直接使用蚁剑连接 连接并进入后,在根目录下发现名为 flag 的文件,即可获取 flag -End-
- Kryo反序列化链分析
前言 Kryo是一个快速序列化/反序列化工具,依赖于字节码生成机制(底层使用了ASM库),因此在序列化速度上有一定的优势,但正因如此,其使用也只能限制在基于JVM的语言上. Kryo序列化出的结果,是 ...
- el-tree选中子级时默认选中父级（角色授权）
问题1:选中子级时默认选中父级 <el-tree :data="menuData" show-checkbox default-expand-all node-key=&qu ...
- 【hibernate】使用HQL对页面进行时间校验操作（预约）
[hibernate]使用HQL对页面进行时间校验操作(预约) 预约系统中的时间校验 正好接了一个预约的需求,还需要用java 7和hibernate 1.时间冲突,时间段不能重复,在保存前对数据库进 ...
- HarmonyOS NEXT 实战开发—Grid和List内拖拽交换子组件位置
介绍 本示例分别通过onItemDrop()和onDrop()回调,实现子组件在Grid和List中的子组件位置交换. 效果图预览 使用说明: 拖拽Grid中子组件,到目标Grid子组件位置,进行两者 ...
- 用了那么久的Lombok，你知道它的原理么？
简介: 在写Java代码的时候,最烦写setter/getter方法,自从有了Lombok插件不用再写那些方法之后,感觉再也回不去了,那你们是否好奇过Lombok是怎么把setter/getter方法 ...
- 实时计算 Flink 版总体介绍
简介: 实时计算 Flink 版(Alibaba Cloud Realtime Compute for Apache Flink,Powered by Ververica)是阿里云基于 Apache ...
- KubeDL 加入 CNCF Sandbox，加速 AI 产业云原生化
简介: 2021 年 6 月 23 日,云原生计算基金会(CNCF)宣布通过全球 TOC 投票接纳 KubeDL 成为 CNCF Sandbox 项目.KubeDL 是阿里开源的基于 Kuberne ...