Html 父div CSS类未添加到子div

我有一个合适的CSS类的工作下拉列表，它可以按预期工作。在另一个html页面中，我复制了相同的div结构，包括CSS类，但它不起作用。 我使用的是Chrome浏览器，当我执行F12-inspect时，我注意到父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>

<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>

{{selected.application}


{{app.application}

我的下拉列表的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>

<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>

{{selected.name}


{{app.name}

---

我在这里犯了什么错误？

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

第一幅图像中的CSS选择器以

应用程序列表…

-开头，不带前导点，它适用于

标记，但不适用于类

.application list…

在第一个示例中，HTML中实际上有一个标记

，在第二个示例中，有一个带有类

应用程序列表的
div
标记-因此，在第一个示例中，选择器
应用程序列表..
将只应用于标记，而不应用于具有该名称的类

要修复它，请在第二页的HTML中插入一个包装标签
，或者将CSS规则的选择器更改为“.application list…”（包括点）–两个示例中都有该类，标记仅出现在第一个示例中。
请将我的工作代码与我的问题中的不工作代码进行比较，没有添加CSS规则选择器，但在一个位置它仍然可以正常工作，但在另一个位置却不能正常工作。为什么它的行为不同？我在这里缺少的是什么？你是说这两个都是指2个不同ent CSS文件？但在我的应用程序中，两者都引用了相同的文件/样式。我最终创建了新的CSS类。应用程序列表。问题是现有的CSS类没有“.”前缀。我有一个带有“应用程序列表”的angular2组件，现有的CSS类被引用。创建新的“.application列表”后“CSS课程奏效了。谢谢你的帮助：）