CSS的独特性Specificity的示例代码分析
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了CSS的独特性Specificity的示例代码分析，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2344字，纯文字阅读大概需要4分钟。
内容图文
CSS是一个陈述性语言，你可以为DOM中每个元素定义规则风格， 在这些定义中，一些规则会比在顺序上在后面的其他规则具有更高的优先权，比如inline内联就比其之前定义的规则更优先，比如如果我们有下面HTML和CSS代码：<button class="button-warning">
其CSS是：
.button-warning {
background: red;
}
button, input[type=submit] {
background: gray;
}因为.button-warning 在 button, input[type=submit]之前定义，按顺序关系猜测，它的background: red会被后者的background: gray覆盖，其实不是，它反而比后者更优先。
一些selector选择器会比其他更具有特殊性，比如#id选择器比.class选择器更高优先权。因为选择器之间有这种相比而言更具特殊性或优先权的现象，因此，如果我们不断任意用一个选择器高于另外一个选择器，那么就会陷入特殊性地狱，因为楼外有楼，山外有山，这样的代码难以维护。所以，在编写选择器时，我们需要问自己，这个选择器是能实现功能的中最低级别的？
下面是特殊性的层次，从高到低：
1.内联最高，内联是用在XHTML中的style内部，直接和XHTML元素挂钩，比如：
<h1 style="color: #fff;">
这个就是在h1元素中内联了style值为”color: #fff;“，这个内联是比其他包括在css文件中的h1定义更具有特殊性，优先权最高，尽管你在css文件中也定义了h1的style，但是因为有了这行的内联定义而失效。
2. 其次是选择器的ID，ID是HTML元素的唯一标识，使用#前缀，比如#p。
3.再次是选择器的类 属性和伪类，包括以圆点为前缀的.classes [属性] 或伪类的:hover :focus。
4.Html元素和伪元素 包括:before 和 :after实例
如果一个元素综合了以上多个特殊性，那么计算特殊性的分数越高，优先权越高，如何计算特殊性？
首先从0分开始，内联增加1000分，ID增加100分，类和伪类加10分，元素和伪元素 加1分。
比如：
body #content .data img:hover
特殊性分数值计算如下：#content是ID，故加100分；.data是类，故加10分；而:hover是伪类故加10分，body是属于Html元素故加1分，而img也是Html元素故加1分，总分是122分。
比如：CSS定义如下：
a{ color:blue;}
p a{ color:green;}
p a.mycolor{ color:red;}那么Html规则使用如下：
<p><a href="#" class="mycolor"></a></p>
那么，最后哪个定义占据优先权，也就是字体到底是什么颜色？注意这里有一个.mycolor选择器类是分数最高，会加10分，因此这个字的颜色最后为红色。当然，如果没有.mycolor定义，比如：
<p><a href="#" ></a></p>
这时颜色是绿色，因为都是有两个普通html元素p和a，分数为2。
所以，这里有另外一个计算特殊性方法：
统计选择器中ID的数量，也就是#p之类数量
统计选择器中的.class类数量
统计html元素名称和伪元素数量
最后，按照三个顺序从高到低1条-2条-3条定义特殊性。
以上就是CSS的独特性Specificity的示例代码分析的内容，更多相关内容请关注PHP中文网（www.gxlcms.com）！
内容总结
以上是互联网集市为您收集整理的CSS的独特性Specificity的示例代码分析全部内容，希望文章能够帮你解决CSS的独特性Specificity的示例代码分析所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。