chrome的元素检查器中未显示类答案

【问题标题】：class is not shown in elements inspector in chromechrome的元素检查器中未显示类
【发布时间】：2022-02-02 19:27:34
【问题描述】：

如图和圆圈部分所示，我创建了一个名为clsTest 的类。在这堂课上，我想改变如图所示，红色圆圈元素的位置和一些属性。红色圈出的元素是由日历的输入字段和图标。当我在 chrome 中激活元素检查器时，clsTest 类永远不会出现或列在其他类中。换句话说 ,如图所示，类.clr-control-container显示，但类clsTest不显示！！

请告诉我如何正确分配一个类并能够修改它的属性来改变位置和属性红色圈出的元素。

html：

<clr-date-container class="clsDateContainer">
            <label id="idDateOfSprayLabel">
                <p>Date:</p>
            </label>
            <input id="idDateOfSprayValue" class="clsTest clr-control-container" clrDate type="date" placeholder="Specify date of spray" [(ngModel)]="iDatePasser.dateOfSpray" (ngModelChange)="onDateOfSpraySet($event)" name="dateOfSpray"
                value="2021-07-21" min="2021-01-01" max="2090-12-31" />
        </clr-date-container>

css：

.clsTest{
bottom: 10;
right: 0px;
left: 430px;
top: 174px;
width: auto;

}

图片：

【问题讨论】：

您在哪里定义了clr-control-container 类的样式，而您又在哪里定义了clsTest？
@gru 都在 css 文件中
添加样式后，您是否重新启动了应用？
@gru 是的！！！！！！！！！

标签： javascript html css angular typescript

【解决方案1】：

我假设默认的 Angular style encapsulation 会导致此行为。

尝试像这样将伪类 :host 添加到您的 css 中：

:host .clsTest{
  bottom: 10;
  right: 0px;
  left: 430px;
  top: 174px;
  width: auto;
}

:host 告诉 Angular 将样式直接应用于 DOM 元素（而不是基于组件/模板）。或者，您还可以添加 ::ng-deep 以将样式也应用于所选元素的所有子元素（CSS 选择器也匹配）。

【讨论】：

【解决方案2】：

输入当前有类

要查看输入元素的类，只需单击它（在 chrome 开发者工具的元素部分），我在图像上指定它。

请记住，您赋予元素的类的顺序很重要。第二个类将覆盖第一个。

【讨论】：