css正在反向层次结构中应用

Question

我正在使用asp.net并在代码中创建以下内容。

<div class="menu-box">
<p class="customer-name" style="margin-top:10px;">@Model.name</p>
<p class="customer-number">Customer ID: @Model.id</p>

@for (var m= 0;m< Model.items.Count; m++)
{
    var i = Model.items.ElementAt(m);
    if (!i.isSubItem)
    {
        <div class="menu-box-item @if(i.selected) {<text>selected</text>}">
            <a href="/@i.controller">@i.text</a>

            @while (m+1<Model.items.Count && Model.items.ElementAt(m+1).isSubItem)
            {
                m++;
                i = Model.items.ElementAt(m);
                <div >
                    <a class="menu-boxsubitem @if(i.selected) {<text>selected</text>}" href="/@i.controller">@i.text</a>
                </div>
            }
        </div>

    }
}
<div class="menu-box-item">
    <a href="/Login">Log Out</a>
</div>

但看起来父DIV的css类覆盖了孩子的CSS。以下是chrome开发者控制台的屏幕截图。相关位被突出显示。

Answer 1

.menu-box .menu-box-item a  -> line 99

.menu-box .selected a -> line 119

预期的行为是第119行覆盖第99行。

您可以尝试添加重量 -

.menu-box div.selected a

如果仍然无效，您可以重新排序，或使用!important。