CSS特异性如何决定要应用的样式？

  • Z时代
  • 2024-01-10
  • 分类：问答

CSS如何确定何时将一种样式应用于另一种样式？

我已经遍历了W3CSS3选择器文档几次，这帮助我了解了如何在jQuery中更好地使用CSS选择器，但是并没有真正帮助我理解何时将一个CSS规则应用于另一个CSS规则。

我有以下HTML：

<div class='item'>
    <a>Link 1</a>
    <a class='special'>Link 2</a>
</div>

我有以下CSS：

.item a {
    text-decoration: none;
    color: black;
    font-weight: bold;
    font-size: 1em;
}
.special {
    text-decoration: underline;
    color: red;
    font-weight: normal;
    font-size: 2em;
}

鉴于以上所述，链接1和链接2的样式将由.item aCSS 确定。为什么与.specialLink 2 关联的样式没有优先级？

显然，我可以这样解决：

.special {
    text-decoration: underline !important;
    color: red !important;
    font-weight: normal !important;
    font-size: 1em !important;
}

但是，由于缺乏了解，我觉得这是我必须要解决的问题。

回答：

它是基于IDs，classes和tags。 IDs具有最高的特异性，classes然后是tags，因此：

.item a     == 0 1 1      0 (id) 1 (class=item) 1 (tag=a)
.special    == 0 1 0
#foo        == 1 0 0
#foo .bar a == 1 1 1
#foo #bar   == 2 0 0

:)如果是平局，则以文件中的最后一个为准。注意1 0 0节拍0 1000 1000

如果要.special申请，请使其更加具体：.item a.special

以上是 CSS特异性如何决定要应用的样式？ 的全部内容， 来源链接： utcz.com/qa/406105.html

回到顶部