CSS特异性还是继承性？ [英] CSS specificity or inheritance?

问题描述

我在这里看过类似的问题，但我没有发现一个与我的情况有关的问题。

I've looked at similar questions here but I haven't found one particular to my case.

如果我正确阅读了这篇文章： http://css-tricks.com/specifics-on-css-specificity/

If I read this article correctly: http://css-tricks.com/specifics-on-css-specificity/

然后发生的事情对我来说就没有意义。有人可以解释这是由于本地性，继承性还是特定性吗？我删除了所有不相关的CSS。

then what is happening doesn't make sense to me. Can someone explain if this is due to locality, inheritance or specificity please? I've stripped out all the unrelated css.

CSS

a:link {font-size:0.875em;color:#005984}
.button {color:#fff}

HTML

<a class="button">Awesome call to action</a>

我最后得到的按钮带有蓝色文本，而不是白色文本。现在，a是一个元素，因此它应该比.button类具有更低的特异性，不是吗？

I end up with a button that has blue text, instead of white. Now, a is an element, so it should have lower specificity than the .button class, should it not?

感谢您的时间。

推荐答案

这是由于特殊性：尽管 a 是元素类型选择器，其不如类选择器具体，但它带有：link 伪类，它同样专门用于您的 .button 类。因此，类型+伪类将比类更具体。

This is due to specificity: although a is an element type selector which is less specific than a class selector, it's accompanied by a :link pseudo-class which is equally specific to your .button class. A type + pseudo-class will therefore be more specific than a class.

这里没有继承，因为没有父元素样式可以被应用。到你的元素。 继承是指从父元素采用样式。当您看到链接显示为蓝色而不是白色时，即为级联

There is no inheritance going on here as there are no parent element styles that I can see being applied to your element. Inheritance refers to adopting styles from parent elements. When you see the link displaying blue instead of white, that's the cascade at work, not inheritance.

位置不是CSS术语（至少在其术语表中不是），所以我不确定您的意思。

Locality isn't a CSS term (at least not in its glossary), so I'm not sure what you mean by that.

如果您需要将号召性用语按钮设为白色，只需将其设为 a 选择器，因此您的选择器同样具体，并且最后一个声明将优先：

If you need your call-to-action button to be white, simply give it the a selector as well, so your selectors are equally specific and the last declaration will take precedence:

a:link {font-size:0.875em;color:#005984}
a.button {color:#fff}

这篇关于CSS特异性还是继承性？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！