Question

我在这里看过类似的问题，但我没有找到一个特别的问题。

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

然后发生的事情对我来说没有意义。有人可以解释这是因为地点，遗传或特异性吗？我已经删除了所有无关的CSS。

CSS

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

HTML

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

我最终得到一个蓝色文字的按钮，而不是白色。现在，a是一个元素，所以它应该比.button类具有更低的特异性，如果不是的话？

感谢您的时间。

Answer 1

这是由specificity引起的：尽管a是一个元类型选择器，它不像一个类选择器，它伴随着一个:link伪类，它同样特定于你的.button课程。因此，类型+伪类将比类更具体。

这里没有继承，因为没有我可以看到应用于元素的父元素样式。 Inheritance指的是从父元素中采用样式。当你看到链接显示蓝色而不是白色时，那就是cascade正在工作，而不是继承。

Locality不是CSS术语（至少不在其词汇表中），所以我不确定你的意思。

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

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

Answer 2

选择器的特异性计算如下：
   - 计算选择器中ID选择器的数量（= a）
   - 计算选择器（= b）中的类选择器，属性选择器和伪类的数量    - 计算选择器中类型选择器和伪元素的数量（= c）
   - 忽略通用选择器

否定伪类中的选择器与任何其他类似，但是否定本身不算作伪类。

连接三个数字a-b-c（在具有大碱基的数字系统中）给出了特异性。

所以：

a:link
   - a = 0
   - b = 1
   - c = 1
   - 结果= 011

.button
   - a = 0
   - b = 1
   - c = 0
   - 结果= 010

结果：a:link高于.button。

修复：:link无论如何都不会对a个标记起作用，因此指定a:link是多余的。请改用:link，这样可以解决问题（在 .button之后<{1}}已定义为

CSS特异性还是继承？

2 个答案: