为什么在这种情况下颜色样式不起作用？

Question

我有以下html标记:

<div class="header-menu">
    <span class="header-title noselect">
        <i class="fa fa-bars"></i>
        <a href="/" class="header-title-value">
            {{ headerVm.menu.current.title }}
        </a>            
    </span>
</div>

这个规则*.less存档:

.header-menu {
    .header-title {
        color: red;
        a {
            font-size: 2em;
            font-family: 'Roboto', sans-serif;
            font-weight: 300;
        }
    }
}

这被翻译成css:

.header-menu .header-title{
    cursor:pointer;
    color:#f00
}
.header-menu .header-title a {
    font-size:2em;
    font-family:'Roboto',sans-serif;
    font-weight:300
}

在这种情况下color,a 的属性header-title不会影响a标记,但如果我将它放在a规则中,它就可以工作.此外,我试图设置!improtant的color财产也没有帮助.另一个有趣的时刻,如果我从a规则中移动字体属性并将它们放入其中.header-menu .header-title将适用于a标记,但不适用于color属性.

在Chrome检查器中,我看到我的a规则从bootstrap开始,但不是从header-title.实际上我对如何解决这个问题并不感兴趣,但为什么它的工作方式和正确的修复/最佳实践建议也是如此=)

Answer 1

默认情况下,<a>标记不会从其父元素继承颜色.试试这个来强制继承:

.header-menu {
    .header-title {
        color: red;
        a {
            color: inherit;
            font-size: 2em;
            font-family: 'Roboto', sans-serif;
            font-weight: 300;
        }
    }
}