跳转到主内容
趣航编程网 - 趣学编程,启航技术之路!

CSS特异性的分数是如何计算的?

CSS特异性, 是一种根据点数区分不同CSS选择器或优先级的过程,具有最高特异性点数的选择器将获胜,并且该选择器的CSS样式将应用于该元素。 每个 CSS 选择器的点层次结构及其优先级如下表所示 - Sr. No.的中文翻译为:序号CSS选择器特异性得分1元素选择器12类选择器103ID选择器1004内联CSS10005元素+类选择器1 + 10 = 116元素+ID选择器1 + 100 = 101 用例 − 假设你有一个带有类和ID的元素,并且你想要使用类选择器和ID选择器给它添加CSS样式。在这种情况下,它将使用ID选择器定义的CSS样式,因为ID选择器的特异性比类选择器高10倍。 现在让我们借助代码示例详细了解这些选择器之间的区别及其优先级。 立即学习 “ 前端免费学习笔记(深入) ”; 步骤 步骤 1 - 在第一步中,我们将定义一个带有类和ID属性的HTML元素。 第二步 - 在这一步中,我们将通过使用CSS选择器选择元素并检查它们的优先级,为元素编写CSS。 Example 的中文翻译为: 示例 下面的示例将说明不同 CSS 选择器之间的差异及其优先级 -

This is Heading of Demo element.

在上面的示例中,我们通过在两个不同的选择器的帮助下选择同一个元素,在同一个元素上使用了相同的 CSS 属性,我们可以清楚地看到具有较高特异性点的选择器的 CSS 应用于该元素。 示例 2 下面的示例将解释更多 CSS 选择器在其特殊点方面的差异 -

This is Heading of Demo element.

在上面的例子中,我们再次使用了相同的CSS属性,但在不同的CSS选择器中使用了不同的值。在主div元素的情况下,我们使用了内联和ID选择器来应用CSS,但由于内联选择器的优先级远远高于ID选择器,所以内联CSS被应用到了该元素上。而在h2标题的情况下,我们使用了ID和元素+ID选择器,后者的CSS特异性更高,因此元素+ID选择器的CSS被应用到了该元素上。 结论 在本文中,我们不仅学习了CSS特异性点的计算,还详细了解了不同CSS选择器内部编写的CSS的优先级与其特异性点之间的区别,并通过代码示例进行了实际操作。我们通过同时选择不同选择器来为同一元素赋予不同值的CSS属性,从而看到了CSS选择器之间的差异。

相关文章