CSS特异性，是一种根据点数区分不同CSS选择器或优先级的过程，具有最高特异性点数的选择器将获胜，并且该选择器的CSS样式将应用于该元素。
每个 CSS 选择器的点层次结构及其优先级如下表所示 –
| Sr. No. | 序号 | CSS选择器 | 特异性得分 |
|---|---|---|---|
| 1 | 元素选择器 | 1 | |
| 2 | 类选择器 | 10 | |
| 3 | ID选择器 | 100 | |
| 4 | 内联CSS | 1000 | |
| 5 | 元素+类选择器 | 1 + 10 = 11 | |
| 6 | 元素+ID选择器 | 1 + 100 = 101 |
用例 − 假设你有一个带有类和ID的元素，并且你想要使用类选择器和ID选择器给它添加CSS样式。在这种情况下，它将使用ID选择器定义的CSS样式，因为ID选择器的特异性比类选择器高10倍。
现在让我们借助代码示例详细了解这些选择器之间的区别及其优先级。
步骤
-
步骤 1 – 在第一步中，我们将定义一个带有类和ID属性的HTML元素。
-
第二步 – 在这一步中，我们将通过使用CSS选择器选择元素并检查它们的优先级，为元素编写CSS。
Example
的中文翻译为：
示例
下面的示例将说明不同 CSS 选择器之间的差异及其优先级 –
<html>
<head>
<style>
/* CSS of the main Div using Class = 10 points and ID = 100 points selectors */
#IdDemo {
background-color: #84abb5;
color: white;
height: 150px;
text-align: center;
}
.classDemo {
background-color: green;
color: white;
height: 400px;
text-align: end;
}
/* Heading Styles to show difference between only class = 10 points and element + class selector = 11 points */
h2.demoH2Class {
color: #e6d4b6;
background-color: #414141;
}
.demoH2Class {
color: red;
background-color: white;
}
</style>
</head>
<body>
<div id = "IdDemo" class = "classDemo">
<h2 class = "demoH2Class" id = "demoH2ID"> This is Heading of Demo element. </h2>
</div>
</body>
</html>
在上面的示例中，我们通过在两个不同的选择器的帮助下选择同一个元素，在同一个元素上使用了相同的 CSS 属性，我们可以清楚地看到具有较高特异性点的选择器的 CSS 应用于该元素。
示例 2
下面的示例将解释更多 CSS 选择器在其特殊点方面的差异 –
<html>
<head>
<style>
/* CSS of the main Div using and element + ID = 101 points selectors */
div#IdDemo {
background-color: green;
color: blue;
height: 250px;
text-align: start;
}
/* Heading Styles to show difference between only ID = 100 points and element + ID = 101 points selector */
h2#demoH2ID {
color: #e6d4b6;
background-color: #414141;
}
#demoH2ID {
color: red;
background-color: white;
}
</style>
</head>
<body>
<!-- CSS of the main div is given inline = 1000 points and inside the ID + element = 101 points -->
<div id = "IdDemo" class = "classDemo"
style = "background-color: #84abb5; color: white; height: 150px; text-align: center;">
<h2 class = "demoH2Class" id = "demoH2ID">This is Heading of Demo element.</h2>
</div>
</body>
</html>
在上面的例子中，我们再次使用了相同的CSS属性，但在不同的CSS选择器中使用了不同的值。在主div元素的情况下，我们使用了内联和ID选择器来应用CSS，但由于内联选择器的优先级远远高于ID选择器，所以内联CSS被应用到了该元素上。而在h2标题的情况下，我们使用了ID和元素+ID选择器，后者的CSS特异性更高，因此元素+ID选择器的CSS被应用到了该元素上。
结论
在本文中，我们不仅学习了CSS特异性点的计算，还详细了解了不同CSS选择器内部编写的CSS的优先级与其特异性点之间的区别，并通过代码示例进行了实际操作。我们通过同时选择不同选择器来为同一元素赋予不同值的CSS属性，从而看到了CSS选择器之间的差异。
以上就是CSS特异性的分数是如何计算的？的详细内容，更多请关注双恒网络其它相关文章！
2. 分享目的仅供大家学习和交流，您必须在下载后24小时内删除！
3. 不得使用于非法商业用途，不得违反国家法律。否则后果自负！
4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
5. 如有链接无法下载、失效或广告，请联系管理员处理！
6. 本站资源售价只是赞助，收取费用仅维持本站的日常运营所需！
7. 如遇到加密压缩包，请使用WINRAR解压,如遇到无法解压的请联系管理员！
8. 精力有限，不少源码未能详细测试（解密），不能分辨部分源码是病毒还是误报，所以没有进行任何修改，大家使用前请进行甄别
9.本站默认解压密码为:www.sudo1.com
本站提供的一切软件、教程和内容信息仅限用于学习和研究目的。
不得将上述内容用于商业或者非法用途，否则，一切后果请用户自负。
本站信息来自网络收集整理，版权争议与本站无关。您必须在下载后的24个小时之内，从您的电脑或手机中彻底删除上述内容。
如果您喜欢该程序和内容，请支持正版，购买注册，得到更好的正版服务。
我们非常重视版权问题，如有侵权请邮件与我们联系处理。敬请谅解！
云资源网 » CSS特异性的分数是如何计算的？
常见问题FAQ
- 免费下载或者VIP会员专享资源能否直接商用？
- 本站所有资源版权均属于原作者所有，这里所提供资源均只能用于参考学习用，请勿直接商用。若由于商用引起版权纠纷，一切责任均由使用者承担。更多说明请参考 VIP介绍。
- 提示下载完但解压或打开不了？
- 你们有qq群吗怎么加入？
