无法上课使用

Question

我有一个带有＆＃34; calbri＆＃34;类的H3标题，使用以下HTML：

<footer>
<div class='wrapper'>

<div class='col'>
<h3 class="calibri">Column Header</h3>
<p>Some text.</p>
</div>

</div>
</footer>

样式定义如下：

footer .col h3  {font-size:20px; font-family: 'HelveticaNeueMediumCond';}
.calibri {font-family:Calibri,Verdana,Arial;} 

＆＃34; .col h3＆＃34;风格很好。 添加的＆＃34; .calibri＆＃34;但是，不是。

您可以提供任何帮助来解释为什么会受到高度赞赏。

谢谢，

大卫

Answer 1

CSS中有一个点数系统。具有更多点的选择器将覆盖另一个选择器。让我们比较2个选择器

第一个选择器：

footer .col h3{}

上面的选择器有2个元素（页脚和h3）和1个类（.col）;这导致 12分。

第二个选择器：

calibri{}

这有1个班级（.calibri）;这导致 10分。

结论：

因为12> 10，第一个选择器将覆盖第二个选择器。

如果你想让第二个选择器工作，你需要给它更多的分数。一种方法是将类更改为id。所以class =＆＃34; calibri＆＃34;成为id =＆＃34; calibri＆＃34;这给了校准选择器100分。

此外：

以下是点数系统的文章：http://css-tricks.com/specifics-on-css-specificity/

Answer 2

请参阅有关CSS特异性的https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity。

您需要改为使用h3.calibri。