如何理解这个CSS 继承（或覆盖，选择）

Question

我正在创建一个从 Pixyll 分叉出来的 Jekyll 网页。首先，我对 CSS 和任何与 HTML.

相关的东西都很陌生

请参阅屏幕截图。大图是here，下面是HTML/CSS部分。一切如常，除了红框内容。

原版主题"Awesome title"和"About | Contact"的标题样式相同。 我只想修改站点磁贴的粗细和字体。

原来的HTML有site-titleclass"Awesome title"，但是CSS没有专门的site-titleclass.

我添加了.site-title如红框所示。我能够覆盖 font-family、font-size 和间距，但颜色和粗细是从 .site_header 继承的。从我的编程背景来看，"Awesome title" 有最近的 site-title CSS 而 .site_header 在外部范围。

问题：

为什么外部 site-header 隐藏了 site-title 的内部定义？
为网站标题定义自己的字体颜色等最优雅的方法是什么？

Answer 1

我相信 html 标签优先于 css classes。所以 css 定义将胜过 .site-title css class 定义。
你可以尝试更花哨一点，把两者结合起来..
```
header .site-title {
  color: ;
  font-weight: ;
}
```

这只是说，只要 header 中有 site-title，就执行 css。

Answer 2

原因是在更具体的定义.site-header a中都涉及到class和和元素，而在.site-title中只涉及涉及class。

改用 a.site-title，只要您的定义在 CSS 源代码顺序中您要覆盖的定义之后，它就应该可以工作。

这说明了浏览器是如何计算它的：

http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html

如何理解这个CSS 继承（或覆盖，选择）

How to understand this CSS inheritance (or override, selection)

html

css

fonts

css-specificity