如何理解这种 CSS 继承（或覆盖、选择）

Question

我正在创建一个从 Pixyll 分叉的 Jekyll 网页。首先，我对 CSS 和任何与 HTML 相关的东西都很陌生。

请参阅屏幕截图。大图是here，HTML/CSS 部分在下面。除了红框的内容，一切都照旧。

原始主题的标题“很棒的标题”和“关于|联系方式”的样式相同。 我只想修改网站磁贴的粗细和字体。

原始的 HTML 有 site-title 类“真棒标题”，但 CSS 没有专门的 site-title 类。

我添加了.site-title，如红框所示。我能够覆盖字体系列、字体大小和间距，但颜色和粗细继承自 .site_header。从我的编程背景来看，“Awesome title”具有最近的site-title CSS，而.site_header 在外部范围内。

问题：

1. 为什么外部的site-header 会遮蔽site-title 的内部定义？
2. 为网站标题定义自己的字体颜色等最优雅的方式是什么？

Answer 1

1. 我相信 html 标签优先于 css 类。因此，css 定义将胜过 .site-title css 类定义。

2. 您可以尝试更高级一点并将两者结合起来..

   header .site-title {
     color: ;
     font-weight: ;
   }
   

这只是说，只要标题中有站点标题，就执行此 css。

Answer 2

原因是在更具体的定义.site-header a 中同时涉及到一个类和 和元素，而在.site-title 中只涉及一个类。

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

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

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