家长div CSS类没有被添加到子div

Question

我有一个适当的CSS类工作下拉，它按预期工作。在另一个html页面中，我复制了包含CSS类的相同的div结构，但它不起作用。 我使用的是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>，在第二个例子中有一个div标签与类application-list - 所以在你的第一个例子中，选择application-list..将仅适用于标签 ，而不是类别。

要解决它，无论是插入一个包裹标签<application-list>到第二页中的HTML或更改CSS规则”。应用列表的选择...`（包括点） - 类是在这两个例子中，标签只在第一个例子中出现。