摘要：特殊性我们可以用很多种写法来定位一个元素，而选择器的特殊性值则是决定哪一个胜出的关键。选择器的特殊性值其实很简单，就是的形式。按照特殊性对应用到给定元素的所有声明排序。有较高特殊性的元素权重要大于有较低的特殊性的元素。
之前学CSS一直没有深入的去研究CSS选择器的优先级，这次好好的看了下之后写的时候特殊性值仿佛都浮现在眼前，现在写的时候心里更加清晰，这里梳理一下学到的东西。
特殊性(specificity)我们可以用很多种写法来定位一个元素，而选择器的特殊性值则是决定哪一个胜出的关键。选择器的特殊性值其实很简单，就是 0,0,0,1/0,1,0,1/0,0,0,5/... 的形式。
主要有四个规则:
用了ID +0,1,0,0
用class、属性(如[id="btn1"])、伪类(如:hover) +0,0,1,0
元素和伪元素(如::before) 加0,0,0,1
结合符对特殊性没有贡献,而通配符的贡献是0,0,0,0.(所以他们对总特殊性没有影响)
那么最前面的0呢?其实这个是留给内联样式的的~所以内联样式的特殊性最高,是1,0,0,0.
接下来我们再看几个例子相信能更好地理解:
p{font-style: normal} /* 0,0,0,1 */
body div p{font-style:italic} /* 0,0,0,3 */(winner)
html > body table tr[id="totals"] td ul > li{color:maroon;} /* 0,0,1,7 */
li#answer {color: navy} /* 0,1,0,1 /* (winner)
我们注意到第二组尽管第一个的特殊性值的最后一part已经达到了7，但是还是输给了0,1,0,1.特殊性值并不是简单的进制相加和比较,而是从左向右排序的,,只要前面比你大,不管后面你是7还是77,都比你特殊性高。如1,0,0,0大于0,10,0,0.
这是从网上找到的一张图~很有意思.
最后一点则是重要声明:
p.dark{color: #333 !important;}
重要声明并没有贡献特殊性值,但是重要声明总是会覆盖非重要声明,所以我们可以把重要声明和非重要生命分为两组，非重要声明使用特殊性值来解决冲突，重要声明的冲突会在重要声明内部解决.
继承继承很简单,后代元素样式会继承父元素的样式.
但是显然边框，盒子模型的外边距、内边距等等都是不能继承的。
继承的值不贡献特殊性,我们要注意这和0,0,0,0特殊性是有区别的.
0,0,0,0特殊性会优先于无特殊性.
*{color: gray}
h1{color: black}
css specificity
em中的字体颜色会是灰色的,因为0特殊性比继承值优先级高.
层叠CSS其实不就叫层叠样式表嘛(cascading style sheet),所以层叠是CSS最核心的概念,而层叠其实就是结合我们前面所说的特殊性和继承做到的.
CSS的层叠规则如下:
找出所有相关的规则,这些规则都包含与一个给定元素匹配的选择器。
按显式权重对应用到该元素的所有声明排序2）按照显式权重对应用到该元素的所有声明排序。标志！important的规则的权重要高于没有！important标志的规则。按照来源对应用到给定元素的所有声明排序。共有3种来源，创作人员，读者和用户代理。正常情况下，创作人员 > 读者模式 > 用户代理的默认样式。
按照特殊性对应用到给定元素的所有声明排序。有较高特殊性的元素权重要大于有较低的特殊性的元素。
按照出现的顺序应用到给定元素的所有声明排序。一个声明在样式表或文档中越后出现，它的权重就越大。如果样式表中右导入的样式表，一般认为出现在导入样式表中的声明在前，主样式表中的所有声明在后。
css权威指南balabala了这一大段,还是简单点来描述吧.
首先我们确定来源
读者的重要声明>创作人员的重要声明>创作人员的正常声明>读者的正常声明>用户代理声明.
(读者的声明就是用户自定义的样式,比如在设置中改变字体大小.)
然后再按特殊性排序,特殊性值高的优先级高.
如果特殊性值还是一样,那么后定义的规则优先.
总结在实际开发过程中,我们可能只需要知道内联样式>id>class即可,如果特殊性相同,后定义的规则优先.
参考书籍: 《CSS: The Definitive Guide》
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/111440.html
摘要：相对于其最近的一个定位设置的父对象进行绝对定位，可用。代码基本语法默认值，无特殊定位。代码相对定位相对定位生成相对定位的元素，相对于其它位置进行定位。结语结语带你走进定位详解，多试试，熟能生巧嘛 学习CSS相关知识，定位是其中的重点，也是难点之一，如果不了解css定位有时候都不知道怎么用，下面整理了一下关于定位属性的具体理解和应用方案。 一：定位 定位属性列表 position top...
摘要：之前写了一篇详解属性的博文，当时自己没分清楚伪元素和伪类，所以在文章内把概念混淆了，庆幸兄指正了我的错误，所以今天打算好好研究下两者的区别。伪元素用于将特殊的效果添加到某些选择器。伪类种类伪元素种类区别这里用伪类和伪元素来进行比较。 之前写了一篇 《详解 CSS 属性 - :before && :after》 的博文，当时自己没分清楚伪元素和伪类，所以在文章内把概念混淆了，庆幸 @ri...
摘要：之前写了一篇详解属性的博文，当时自己没分清楚伪元素和伪类，所以在文章内把概念混淆了，庆幸兄指正了我的错误，所以今天打算好好研究下两者的区别。伪元素用于将特殊的效果添加到某些选择器。伪类种类伪元素种类区别这里用伪类和伪元素来进行比较。 之前写了一篇 《详解 CSS 属性 - :before && :after》 的博文，当时自己没分清楚伪元素和伪类，所以在文章内把概念混淆了，庆幸 @ri...
摘要：当你将一个样式添加到元素上却发现不起作用时，那就是遇到优先级问题了。那么应该如何处理优先级问题呢，下面我总结了一些解决优先级问题的常用法则。如内部样式外部样式内联样式此时显示的优先级是。 当你将一个样式添加到元素上却发现不起作用时，那就是遇到优先级问题了。那么应该如何处理 CSS 优先级问题呢，下面我总结了一些解决 CSS 优先级问题的常用法则。 样式距离 我们可以通过使用外部样式...
阅读 1295·2021-11-23 09:51
阅读 3399·2021-09-06 15:00
阅读 985·2021-08-16 10:57
阅读 1369·2019-08-30 12:46
阅读 931·2019-08-29 12:22
阅读 1602·2019-08-29 11:07
阅读 3145·2019-08-26 11:23
阅读 2978·2019-08-23 15:14
