Eltern div CSS-Klassen werden nicht zu untergeordneten div hinzugefügt

Question

Ich habe ein funktionierendes Dropdown mit richtigen CSS-Klassen und es funktioniert wie erwartet. In einer anderen HTML-Seite habe ich die gleichen Div-Strukturen einschließlich der CSS-Klassen kopiert, aber es funktioniert nicht. Ich verwende den Chrome-Browser und wenn ich F12 - inspect mache, merke ich, dass die Eltern-Div-Klasse nicht vorangestellt wird und auch die richtigen CSS-Klassen nicht referenziert werden.

Bitte die Schnappschüsse finden, die sowohl mit F12 vergleicht - Überprüfen Sie Details

HTML-Code für das Drop-Down, die für das Drop-Down richtig

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

Mein HTML-Code arbeitet, die doesn funktioniert nicht richtig

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

Was ist der Fehler, den ich hier mache?

Answer 1

EDIT: Ich habe gerade entdecken ein kleines, aber wesentliches Detail:

Der CSS-Selektor in dem ersten Bild beginnt mit application-list..." - ohne führenden Punkt, der den <application-list> Tag gilt, nicht aber für die Klasse.application-list....

In Ihrem ersten Beispiel gibt es tatsächlich einen Tag <application-list> im HTML, im zweiten Beispiel gibt es einen div-Tag mit dem Klasseapplication-list - so gilt die Auswahl application-list.. in Ihrem ersten Beispiel wird nur auf den Tag nicht zu der Klasse mit diesem Namen.

es zu beheben, entweder einen Verpackungs Tag <application-list> in den HTML-Code der zweiten Seite einzufügen oder die Wähler dieser CSS-Regel‘.application-Liste ändern ...` (einschließlich der Punkt) - die Klasse in beiden Beispielen vorhanden, das Etikett nur in der ersten.