父 div CSS 类未添加到子 div

Question

我有一个带有适当 CSS 类的工作下拉列表，它按预期工作。在另一个 html 页面中，我复制了相同的 div 结构，包括 CSS 类，但它不起作用。 我正在使用 Chrome 浏览器，当我执行 F12 - 检查时，我注意到父 div 类没有得到前缀，并且正确的 CSS 类也没有被引用。

请找到与 F12 比较的快照 - 检查详细信息

正确工作的下拉菜单的 HTML 代码

<div class="application-list">
    <div class="dropdown">
        <button class="btn btn-default dropdown-toggle" type="button" id="applicationMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
            {{selected.application}}<span class="caret"></span>
        </button>
        <ul class="dropdown-menu" aria-labelledby="applicationMenu">
            <li *ngFor="let app of applications">
                <a (click)=onChange(app)>{{app.application}}</a>
            </li>
        </ul>
    </div>
</div>

我的下拉菜单的 HTML 代码无法正常工作

<div class="col-lg-7">
    <div class="col-xs-12 col-md-12">
        <div class="col-lg-1">
            <div class="application-list">
                <div class="dropdown">
                    <button class="btn btn-default dropdown-toggle" type="button" id="applicationMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                        {{selected.name}}<span class="caret"></span>
                    </button>
                    <ul class="dropdown-menu" aria-labelledby="applicationMenu">
                        <li *ngFor="let app of workbookSheetsList">
                            <a (click)=onChange(app)>{{app.name}}</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

我在这里做错了什么？

Answer 1

编辑：我刚刚发现了一个小而重要的细节：

第一张图片中的 CSS 选择器以 application-list..." 开头 - 没有前导点，这适用于 <application-list> 标记，但不适用于 类 .application-list...。

在您的第一个示例中，HTML 中实际上有一个标签 <application-list>，在第二个示例中，有一个带有 class application-list- 的 div 标签 - 所以选择器 application-list..在您的第一个示例中，仅适用于 tag，不适用于具有该名称的 class。

要修复它，要么在第二页的 HTML 中插入一个包装标签 <application-list>，要么将该 CSS 规则的选择器更改为“.application-list...”（包括 dot) – 两个例子中都有这个类，标签只出现在第一个例子中。