CSS特异性如何决定要应用的样式？ [英] How does CSS specificity decide which styles to apply?

问题描述

CSS如何确定何时在另一种样式上应用一种样式？

How does CSS determine when to apply one style over another?

我已经通过 W3 CSS3选择器文档几次，这帮助我了解了如何在jQuery中更好地使用CSS选择器，但是并没有真正帮助我了解何时使用一个CSS

I have been through the W3 CSS3 selectors document a few times, and that has helped me understand how to better use CSS selectors in jQuery, but it has not really helped me understand when one CSS rule will be applied over another.

我有以下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 a CSS确定。为什么与 .special 关联的样式不优先于链接2？

Given the above, both Link 1 and Link 2 will be styled the same, as determined by the .item a CSS. Why does the style associated with .special not take precedence for Link 2?

显然，我可以解决它像这样：

Obviously, I can get around it like this:

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

但是，我觉得这是我必须撒的hack

But, I feel like that is a hack that I have to sprinkle in due to my lack of understanding.

推荐答案

它基于 ID ，类和标签。 ID 具有最高的特异性，然后是类然后是标签，因此：

It's based on IDs, classes and tags. IDs have the highest specificity, then classes then tags, so:

.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

whichever has the most wins :) If it's a tie, whichever one comes last in the document wins. Note that 1 0 0 beats 0 1000 1000

如果要应用 .special ，请更具体： .item a.special

If you want .special to apply, make it more specific: .item a.special

这篇关于CSS特异性如何决定要应用的样式？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！