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

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
}

在这种情况下，header-title 的 color 属性不会影响 a 标签，但是如果我将它放在 中>a 规则它起作用。我还尝试在 color 属性上设置 !improtant，但也没有用。另一个有趣的时刻是，如果我从 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;
        }
    }
}