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

Question

我正在创建一个分散自Pixyll的Jekyll网页。首先，我对CSS以及与HTML有关的任何事情都很陌生。

请参阅截屏。更大的图片是here，HTML / CSS部分如下所示。除了红色的盒装内容外，一切都是一样的。

原始主题与标题相同的样式＆＃34;令人敬畏的标题＆＃34;和＆＃34;关于|联系＆＃34 ;. 我只想修改网站图块的重量和字体。

原始HTML有site-title类用于＆＃34;很棒的标题＆＃34;，但CSS没有专门用于site-title类。

我添加了.site-title，如红色框中所示。我能够覆盖font-family，font-size和spacing，但颜色和重量都是从.site_header继承的。从我的编程背景，＆＃34;令人敬畏的标题＆＃34;具有最近的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