Как выбрать только CSS объявления конкретного селектора
Я в основном PHP разработчик, но я столкнулся с проблемой, что при разработке компонентов Joomla я должен установить свой собственный компонент независимо на любом веб-сайте Joomla, что я сделал успешно. Проблема в том, что когда я запускаю свой компонент на случайном веб-сайте Joomla, он также выбирает CSS родительского шаблона, что я не хочу, чтобы он делал. Например, у меня есть модель начальной загрузки в моем компоненте с классом model и шаблон имеет некоторые применения CSS (например, background-color: white) в том же классе model затем на модели показан белый фон, который действительно неудобен и не имеет никакого смысла.
.model{ // I want this to be picked
font-size: 15px;
}
.model{ // I don't want this to be picked
background-color: white;
}
Так можно ли выбрать только CSS требуемого селектора, который объявляется несколько раз?
Решение
Если вы разработали свой собственный компонент Joomla, и ваши имена классов конфликтуют с другими классами, то самым простым / наиболее разумным способом действий было бы объявление уникальных имен классов, чтобы избежать коллизий.
zain_model должен быть достаточно уникальным навсегда. Или префикс, как вам нравится.
Другие решения
В HTML любой элемент, объявленный в его родительском элементе, наследует все атрибуты css родительского класса. Поэтому, если вы хотите удалить белый фон в этом дочернем элементе, вы можете
a) объявите другой класс css для дочернего элемента, который устанавливает фон дочернего элемента на что-то другое (в вашем случае создайте класс «.submodel», который устанавливает фон прозрачным или другим цветом, а также включите размер шрифта в соответствии с тем, что вы желание
б) объявить идентификатор «#submodel» и сделать объявления, описанные в а)
c) если этот дочерний элемент является общим элементом p (абзац) или h (заголовок), вы можете указать класс этого раздела следующим образом:
.model p {
-set background to new colour
-set font size
}
В css стили элементов всегда наследуются от родительских элементов, поэтому при разработке стилей свеклы вы должны иметь в виду, насколько специфичны ваши классы, так как это снизит гибкость в долгосрочной перспективе, просто как примечание
Более подробную информацию о наследовании CSS можно найти здесь: https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Cascade_and_inheritance