如何强制字体向下css树？

Question

我有一种情况，我似乎无法用 CSS 解决。 我有一个侧边栏类别菜单，我想成为某种字体..但是侧边栏中的其他内容是标准字体。 问题是 div 结构看起来像这样。 ...

<div class="col-left sidebar">
  <div id"sidebar-nav" class"block sidebar-nav-left codnitiveSidenavLeft">
    <div class="block-title">..</div>
      <div class="block-content">

现在发生的情况是块内容在 css 中有一个字体值，这是正常字体。当它不在“block sidebar-nav-left coditiveSidenameLeft”类下时，那很好。当它在“block sidebar-nav-left coditiveSidenameLeft”类然后我想使用一种叫做destroyregular的特殊字体..这是我在css中的内容。

.block .block-content {
    padding: 5%;
    font-family: 'Lato',sans-serif;
    /*font-family: "destroyregular";*/
    font-size: 100%;
    font: bold 12px Arial, sans-serif;
    color: #FFFFFF;
    text-transform: uppercase;
}


 #sidebar-nav.block.sidebar-nav-left.codnitiveSidenavLeft
 {
    padding: 5%;
    font-family: "destroyregular" !important;
    font-size: 100%;
    /*font: bold 12px Arial, sans-serif;*/
    color: #E6E6E6;
    text-transform: uppercase;
}

虽然容器类“block sidebar-nav-left coditiveSidenameLeft”确实具有destroyregular字体，但它被block-content覆盖..我如何才能强制destroyregular字体下降到block-content下?

提前谢谢..

--更正了 div 中的错字... side-nav 已更正为 sidebar-nav 抱歉.. --更正错字#2！！ arrgh .. #sidebar-nav.block.sidebar-nav-left codnitiveSidenavLeft

-肯

Answer 1

将侧边栏和 .block-content 更改为：

  #side-nav
     {
        padding: 5%;
        font-family: "destroyregular", Arial, sans-serif;
        font-size: 12px;
        font-weight: bold;
        color: #E6E6E6;
        text-transform: uppercase;
    }

   .block-content {
        padding: 5%;
        font-family: 'Lato', Arial, sans-serif;
        font-size: 12px;
        font-weight: bold;
        color: #FFFFFF;
        text-transform: uppercase;
    }

Answer 2

这个选择器：

#sidebar-nav.block.sidebar-nav-left.codnitiveSidenavLeft

不选择您发布的 HTML sn-p 中的任何内容。 ID 和类名不匹配。

更新：使用更正的选择器，现在发生的情况是字体 destroyregular 正在以非常高的特异性应用于 .block，但 .block-content 不会继承它专门为 .block-content jsut 设置的内容因为亲本具有高特异性。我就是这样做的，相同的 HTML 并添加这个 CSS：

#sidebar-nav.block.sidebar-nav-left.codnitiveSidenavLeft .block-content {
    font-family: "destroyregular";
}

这不是最优的。我认为它被过度指定了。也许您可以摆脱另一个（过度指定的）选择器上的字体定义并将其移至该选择器，但这取决于您实际需要的内容。