как переопределить класс CSS, не затрагивая другие классы с тем же именем - PullRequest
0 голосов
/ 25 октября 2019

У меня есть много виджетов, которые объединены на одной странице, однако мне нужно переопределить класс container для определенного виджета, но происходит то, что затрагиваются все виджеты, имеющие класс с одинаковым именем. ниже приведен скриншот из элемента проверки

enter image description here

выбранная строка с class=container - это виджет, который я хочу редактировать.

Большое спасибо

Ответы [ 4 ]

0 голосов
/ 25 октября 2019

Уважаемый, я думаю, вы хотите переопределить имя класса по умолчанию container для начальной загрузки, что является плохим подходом и создает препятствия для вас в будущем.

Так что лучше использовать div с именем класса внутри container и делать все, что вы хотите ...

Если вы не хотите обновлять html, попробуйте использовать.container:nth-child(5) где (5) - номер, к которому относится этот класс.

0 голосов
/ 25 октября 2019

Есть несколько способов приблизиться к этому. Во-первых, вы можете создать идентификатор для этого HTML-тега, который вы хотите добавить / другого стиля, и создать #<id_name> в вашем CSS для обработки этого стиля или добавить другое имя класса перед container для того, который вы хотите стилизовать. ,Или вы можете использовать специфику CSS для n-го дочернего рендера этого стиля добавления.

Подход 1)

HTML

<tagname id="other_css" class="container" ...>

CSS

#other_css {
  // css stuff
}

Подход 2

HTML

<tagname class="container other_css" ...>

CSS

.other_css {
  ...
}

.container {
  ....
}

Подход 3

HTML

<wrapper>
  <tagname class="container ...>
  <tagname class="container ...>
  <tagname class="container ...> <- the one you care about 
</wrapper>

CSS

wrapper:nth-child(3) {
  ...
}

Ресурсы: - https://www.w3.org/TR/selectors-3/#specificity

0 голосов
/ 25 октября 2019

Просто добавьте другой класс рядом с container и определите / напишите желаемый код CSS внутри нового класса.

0 голосов
/ 25 октября 2019

Если я понимаю, вы хотите иметь другой стиль для одного из элементов с классом container. Хорошей практикой будет создание другого класса со специальным стилем: container new-class

...