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

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 inspector 中，我看到我的 a 规则从 bootstrap 开始，而不是从 header-title 开始。实际上我对如何解决这个问题并不感兴趣，但它为什么以它的方式工作以及正确的 fix/best 实践建议 =)

Answer 1

默认情况下，<a> 标签不会从其父元素继承颜色。试试这个来强制继承：

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

Answer 2

您需要为 a 标签指定颜色属性和值才能看到它的效果

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

Why color styling doesn't work in this case?

html

css

less