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的{{1}}属性不会影响header-title代码，但如果我将其置于a规则中，则可以使用a。此外，我试图在!improtant属性上设置color，这也没有帮助。另一个有趣的时刻，如果我从a规则移动字体属性并将它们放入.header-menu .header-title这将适用于a标记，但不适用于color属性。< / p>

在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;
        }
    }
}

Answer 2

您需要为a标签指定color属性和值以查看其效果

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

2 个答案: