html - 父 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... .

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

要修复它，要么插入一个包装标签 <application-list>进入第二页的 HTML 或将该 CSS 规则的选择器更改为“.application-list...”(包括 点)——该类在两个示例中都存在，标签仅在第一个。