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下载代码的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>标记，但不适用于类 {{1} }。

在您的第一个示例中，HTML中实际上有一个标记.application-list...，在第二个示例中，有一个带有类 <application-list>的{{1}}标记 - 因此，第一个示例中的选择器div仅适用于标记，而不适用于具有该名称的类。

要解决此问题，请将包装标记application-list插入第二页的HTML或将该CSS规则的选择器更改为＆＃39; .application-list ...`（包括点） - 该类在两个示例中都存在，标记仅在第一个中。

父div div CSS类没有被添加到子div

1 个答案: