UI-ID элемента в угловых приложениях CSS стиль

Question

У меня есть вопрос по поводу стиля ui-element-id.В чем разница между обычным html / css id / # и тем, как вы можете стилизовать ui-element-id с помощью css (если это возможно)?

Мой пример: HTML /

Это предупреждение опасно

CSS (Sass) // / deep / #dangerAlert фон: зеленый цвет: зеленый span.text-danger цвет: синий

Но / deep / selector не работает.

Спасибо!

Answer 1

Вы можете стилизовать элементы между их element , class или id селекторами в css.

---

Что это такое?

Элементы являются ссылками на тип элемента HTML , например div.

В HTML , вы можете создать elements , заключив тип элемента в <div></div>, где div - тип элемента.

<div></div>

В CSS вы можете стилизовать элемент с селектором элемента:

div {

}

---

Классы - это имя группы элементов, например container.

In HTML , вы можете применить class к элементу с атрибутом class :

<div class="container">

В CSS , вы можете стилизовать это class , поместив точку перед именем класса:

.container {

}

---

Ids - уникальное имя элемента, такое как group1.

В HTML вы можете применить id к элементу с class атрибут:

<div id="group1">

В CSS вы можете стилизовать этот id , поместив хеш (#) перед именем идентификатора:

#group1 {

}

---

Применим к вашему примеру

Мне дано This Alert is dangerous в качестве вашего HTML контента, но ваш CSS ссылается наЭлемент SPAN с классом text-danger, обернутый другим элементом с идентификатором 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>