стиль автоматически генерируется html атрибутов с регулярным выражением

Question

У меня есть приложение ionic / angular, которое каждый раз автоматически генерирует пользовательский элемент tag с другим атрибутом _ngcontent, например:

<tag _ngcontent-hgr-c2>...</tag> (1st refresh)
<tag _ngcontent-agj-c7>...</tag> (2nd refresh)
<tag _ngcontent-cfx-c5>...</tag> (3rd refresh)

Есть ли способ использовать регулярное выражение для таргетинга атрибут настраиваемого тега?

Это не сработало:

tag[^=_ngcontent-] {
  color: red !important;
}

И не только нацеливание на приложение тега, например:

tag {
  color: red !important;
}

Answer 1

К сожалению, в CSS нет поддержки подстановочных знаков для атрибута имен .

Если у вас есть доступ к коду приложения, которое генерирует настраиваемые теги, вы должны добавить классы в эти элементы (если приложение поддерживает это).

См. также этот вопрос .

Answer 2

Согласно этому ответу, в CSS есть своего рода регулярное выражение, но оно может применяться только к значению атрибута, а не к самому атрибуту. Документация W3 C говорит то же самое, поэтому, поскольку Angular создает настраиваемые атрибуты, я боюсь, что этого может быть трудно достичь с помощью регулярного выражения.

Если вы хотите стилизовать ваш tag, как и во втором примере, вы можете сделать это, определив его стили в глобальном styles.scss. Это не лучшее решение, но оно должно сработать.

Эта angular статья в блоге недавно помогла мне понять идею, лежащую в основе эккапсуляции стиля.