上一节我们知道，选择器种类较多，同一个元素，可以采用不同的选择器方式选中，此时哪个选择器的样式会被最终显示呢？
特指度特指度表示一个css选择器表达式的重要程度，每个选择器表达式都可以通过一个公式计算出一个数值，数越大，越重要。
这个公式叫“I - C - E”计算公式：
I —— Id; 100
C —— Class; 10
E —— Element; 1
即，针对一个css选择器表达式，遇到一个id就往特指度数值中加100，遇到一个class就往特指度数值中加10，遇到一个element就往特指度数值中加1。
例如：
注意：!important优先级最高，高于上面一切。* 选择器最低，低于一切。
此公式也可由三条规则来简单计算：
规则一，包含ID的选择器胜过包含Class的选择器，包含Class的选择器胜过包含元素的选择器
规则二，不同选择器的特指度比较时，不区分加载的顺序（相同选择器在层叠时，后加载的覆盖前加载的），例如：
#div1 {color:red;}
.div1 {color:blue;} //虽然.div1后加载，但是特指度低，所以最终还是显示红色
规则三，设置的样式高于继承的样式，不用考虑特指度，例如下图显示颜色为红色
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/112114.html
摘要：本系列文章重拾主要参考王福朋知多少，结合自己的理解和学习需要，修改或添加了一些内容，难免有失偏颇，仅供自我学习参考之用。 工作中或多或少的写一些css，但总感觉掌握的不够扎实，时而需要查阅一下知识点。我想，一方面跟缺少科班出身式的系统学习有关，另一方面也苦于一直未寻觅到一套合我胃口教程。直到我读到了王福朋css知多少系列文章，使我有了重新系统学习css的想法。 本系列文章（重拾css）...
摘要：而依然有效的原因是浏览器默认样式的优先级低于外联内部样式。例如第二，浏览器默认样式还为设置了，这个值是对英文比较友好，中文状态下就显得有点拥挤。 上一节介绍了样式的五种来源，咱们再通过一张图回顾一下。 showImg(https://segmentfault.com/img/bVM2Rk?w=536&h=245); 对于上面的三层，咱们大概都比较熟悉了。下面的两层中，用户自定义样式一般...
摘要：选择器的扩展选择器本来是的一种规则，用于为选择节点的。但是聪明的人类还是通过选择器创造出了其他领域非常伟大的作品。被推广流行的根本原因就是它的基于选择器的。 前文示图中展示了浏览器的渲染过程，那么css与html是如何结合的呢？答案是——选择器！ 1.选择器 可分为两大类： 标签选择器（*是特殊的标签），可单标签，也可上下文多标签； 属性选择器（id和class本质上也是属性）。 ...
摘要：摘自设计指南样式来源上文中提到，之所以有层叠的概念，是因为有多个样式来源。优先级相同条件下例如都来自引用样式，覆盖的默认规则是后者覆盖前者，但是有一个特殊情况，其实优先级最高。 这一节就开始实践上一节的思路！ 1.层叠的概念 简言之，层叠就是浏览器对多个样式来源进行叠加，最终确定结果的过程。举一个简单的例子： showImg(https://segmentfault.com/img/b...
摘要：来不及解释，快上车有些浏览器不完全支持，现在可以用哪个工具去检测浏览器是否支持，以及支持哪些项常用的标签，它们的属性一般默认为和。的设计初衷是什么具有包裹性例如和两者的宽度是不一样的，不信可以为加上背景色试试。 来不及解释，快上车... ... 有些浏览器不完全支持css3，现在可以用哪个工具去检测浏览器是否支持，以及支持哪些项？ 常用的html标签，它们的display属性一般默认...
阅读 903·2023-04-26 01:34
阅读 3340·2023-04-25 20:58
阅读 3193·2021-11-08 13:22
阅读 2092·2019-08-30 14:17
阅读 2497·2019-08-29 15:27
阅读 2649·2019-08-29 12:45
阅读 2959·2019-08-29 12:26
阅读 2789·2019-08-28 17:51
