[英]Parent div CSS classes are not getting added to child div
I have a working dropdown with proper CSS classes and it works as expected. 我有一个工作下拉列表与适当的CSS类,它按预期工作。 In another html page I have copied the same div structures including the CSS classes but it doesn't work.
在另一个html页面中,我复制了相同的div结构,包括CSS类,但它不起作用。 I am using Chrome browser and When I do the F12 - inspect, I notice that the parent div class are not getting prefixed, and also the right CSS classes are not getting referenced.
我正在使用Chrome浏览器,当我进行F12检查时,我注意到父div类没有得到前缀,并且没有引用正确的CSS类。
Please find the snapshots which compares both with F12 - Inspect details 请查找与F12进行比较的快照 - 检查详细信息
HTML code for the dropdown which works correctly 下拉列表的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>
My HTML code for the dropdown which doesn't works correctly 我的下拉列表的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>
What is the mistake I am doing here? 我在这做什么错?
EDIT: I just discovered a small, but essential detail: 编辑:我刚刚发现了一个小但非常重要的细节:
The CSS selector in the first image starts with application-list..."
- WITHOUT a leading dot, which applies to the <application-list>
tag, but not for the class .application-list...
. 第一个图像中的CSS选择器以
application-list..."
开头application-list..."
- 没有前导点,适用于<application-list>
标签,但不适用于类 .application-list...
In your first example there actually IS a tag <application-list>
in the HTML, in the second example there is a div
tag with the class application-list
- so the selector application-list..
in your first example will only apply to the tag , not to the class with that name. 在你的第一个例子中,HTML中实际上有一个标签
<application-list>
,在第二个例子中有一个带有application-list
类的div
标签 - 所以你的第一个例子中的selector application-list..
只适用于标签 ,而不是具有该名称的类 。
To fix it, either insert a wrapping tag <application-list>
into the HTML of the second page or change the selector of that CSS rule to '.application-list...` ( including the dot) – the class is present in both examples, the tag only in the first one. 要修复它,要么将包装标记
<application-list>
插入到第二页的HTML中,要么将该CSS规则的选择器更改为'.application-list ...`( 包括点) - 该类存在于两个例子,标签只在第一个。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.