父项 div CSS 类 未添加到子项 div

Question

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

请找到与 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> 标签，但不适用于 class.application-list...。

在您的第一个示例中，HTML 中实际上有一个标签 <application-list>，在第二个示例中，有一个带有 [=40 的 div 标签=] application-list- 因此第一个示例中的选择器 application-list.. 将仅适用于 标签 ，而不适用于 class 用那个名字。

要修复它，请将包装标签 <application-list> 插入第二页的 HTML 或将 CSS 规则的选择器更改为 '.application-list.. .`（包括 点）– class 出现在两个示例中，标签仅出现在第一个示例中。