html - Angular 应用程序css样式中的ui-element-id

Question

我对ui-element-id的样式有疑问。普通的html / css id /＃和有什么用css设置ui-element-id的样式（如果可能）有什么区别？

我的例子：
HTML /

此警报很危险

CSS（Sass）/
/ deep / #dangerAlert
    背景：绿色
    颜色：绿色
    span.text-danger
        颜色：蓝色

但是/ deep /选择器不起作用。

谢谢！

Answer 1

您可以在CSS中的元素，类或ID选择器之间设置元素样式。



这些是什么？

元素是对HTML元素类型的引用，例如div。

在HTML中，您可以通过将元素类型包装在<div></div>中来创建元素，其中div是元素类型。

<div></div>

在CSS中，您可以使用元素的选择器设置元素的样式：

div {

}

类是元素的组名，例如container。

在HTML中，您可以使用class属性将一个类应用于元素：

<div class="container">

在CSS中，可以通过在类名称前放置句点来设置此类的样式：

.container {

}

Ids是元素的唯一名称，例如group1。

在HTML中，您可以使用class属性将id应用于元素：

<div id="group1">

在CSS中，您可以通过在ID名称之前放置一个井号（＃）来设置ID的样式：

#group1 {

}

适用于您的示例

我给了This Alert is dangerous作为您的HTML内容，但是您的CSS引用了SPAN元素，该元素的text-danger类由另一个ID为dangerAlert的元素包装。

CSS：

#dangerAlert {
  background: green;
  color: green;
}
span .text-danger {
  color: blue
}

我将缺少的元素应用于您的HTML：

<div id="dangerAlert">
  <span class="text-danger">
    This Alert is dangerous
  </span>
</div>

#dangerAlert {
  background: green;
  color: green;
}

.text-danger {
  color: blue;
}

<div id="dangerAlert">
  <span class="text-danger">
        This Alert is dangerous
      </span>
</div>