問(wèn)題描述

我在這里查看過(guò)類似的問(wèn)題，但我沒(méi)有找到一個(gè)特別適合我的案例的問(wèn)題.

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

如果我正確閱讀了這篇文章:http://css-tricks.com/具體的css-specificity/

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

那么發(fā)生的事情對(duì)我來(lái)說(shuō)沒(méi)有意義.有人可以解釋這是由于地方，繼承還是特殊性嗎?我已經(jīng)刪除了所有不相關(guān)的 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>

我最終得到了一個(gè)帶有藍(lán)色文本的按鈕，而不是白色.現(xiàn)在，a 是一個(gè)元素，所以它應(yīng)該比 .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?

感謝您的寶貴時(shí)間.

推薦答案

這是由于 特異性:雖然 a 是一個(gè)元素類型選擇器，它沒(méi)有類選擇器那么具體，但它伴隨著一個(gè) :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.

這里沒(méi)有繼承，因?yàn)槲铱梢钥吹經(jīng)]有應(yīng)用于您的元素的父元素樣式.繼承是指采用父元素的樣式.當(dāng)您看到顯示藍(lán)色而不是白色的鏈接時(shí)，這就是 cascade 在工作，而不是繼承.

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.

Locality 不是 CSS 術(shù)語(yǔ)(至少不在其詞匯表中)，所以我不確定您的意思.

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

如果你需要你的號(hào)召性用語(yǔ)按鈕是白色的，只需給它一個(gè) a 選擇器，這樣你的選擇器同樣具體，最后的聲明將優(yōu)先:

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}

這篇關(guān)于CSS 特異性還是繼承?的文章就介紹到這了，希望我們推薦的答案對(duì)大家有所幫助，也希望大家多多支持html5模板網(wǎng)！