Как переопределить класс CSS?
background-image — это не класс, а свойство. Вы не можете заменить свойство background -image на свойство background-color. Это отдельные объекты.
Kaustav Banerjee 13 фев. 2015, в 06:29
просто используйте background: # f2dede! важный; .. Я не рекомендую использовать! важный как хороший подход, но попробуйте ..
G.L.P 13 фев. 2015, в 06:31
Показать ещё 2 комментария
Поделиться:
4 ответа
Лучший ответ
все, что вам нужно сделать, чтобы перезаписать свойство css, — это записать его снова, но после объявления. Браузер читает файл стиля сверху вниз и применяет только последнее объявление того же элемента.
.catsandstars < width: 200px; height: 200px; background-image: url("https://developer.mozilla.org/samples/cssref/images/startransparent.gif"); >и вот как вы их правильно перезаписываете
.catsandstars < width: 200px; height: 200px; background-image: url("https://developer.mozilla.org/samples/cssref/images/startransparent.gif"); background-color: transparent; >.catsandstars
Когда в объявлении стиля используется важное правило, это объявление переопределяет любое другое объявление, сделанное в CSS, где бы оно ни находилось в списке объявлений. Хотя, важно не имеет ничего общего со спецификой. Использование! Важно, это плохая практика, потому что она делает отладку трудной, так как вы нарушаете естественное каскадирование в ваших таблицах стилей.
Некоторые эмпирические правила
Никогда не используйте! Важно на сайте css.
Используйте только .
Никогда не используйте! Важно, когда вы пишете плагин /mashup.
Всегда ищите способ использования специфичности до
считая! важный
Как переопределить стиль в CSS: знакомство с CSS для новичков
Есть много интересных методов, как переопределить стиль CSS. Мы вам расскажем про три самых популярных способа осуществить переопределение стиля CSS.
Переопределение стиля CSS с использованием места его написания
- в отдельном документе — это самый популярный способ для многостраничных сайтов;
- в «head» страницы — это популярный способ для одностраничных сайтов;
- в атрибутах самого элемента.
Переопределение стиля CSS при помощи идентификатора
- .text
- #green
Переопределение стиля CSS при помощи атрибута «!important»
- .text
Заключение
Как видите, переопределение стиля CSS — это не самая сложная задача. Для любой ситуации можно найти свой подход. Если подход не нашли, тогда «!important» вам всегда поможет.
Мы будем очень благодарны
если под понравившемся материалом Вы нажмёте одну из кнопок социальных сетей и поделитесь с друзьями.
Как в CSS переопределить стиль
От автора: работая с css вам в любом случае придется переопределять стили. Задания свойств для глобальных селекторов в любом случае не хватит. Сегодня посмотрим, как в css переопределить стиль любому элементу.
Первое – глобальные селекторы тегов
Селекторы тегов предназначены для того, чтобы давать стили всем элементам одного типа. Например, спискам. Чтобы убрать маркеры у всех списков на веб-страницах сайта, достаточно в css записать это:
list — style : none ;
Отлично. Соответственно, свой селектор есть у ячеек таблиц, картинок, блоков, полей форм и вообще всех элементов. Это понятно. Но тут же возникает проблема: едва ли все списки на сайте вы будете стилизовать одинаково. Не, ну тут ситуации могут быть абсолютно разными. Давайте рассмотрим лучше на примере абзацев, потому что это будет более приближено к реальности.
Итак, всем абзацам на странице задаем какие-то стили. Это будет общее оформление.
font — size : 16px ;
color : #333;
Ну сильно напрягаться не будем, всего лишь зададим цвет и размер шрифта. Хорошо, это просто оформление для всех параграфов. Но теперь допустим, что перед вами появилась задача: определенные абзацы нужно выделить красным цветом. Как это сделать?
Достаточно просто. Опишем в css новый стилевой класс. Допустим, назовем его red, чтобы было понятно.
color : red ;
Теперь остается задать его нужным абзацам. Допустим, мне нужно сделать его для второго и третьего. Я надеюсь, прописывать стилевые классы вы умеете, это делается так:
Ну и также поступаем с другим абзацем. В итоге мы уже переопределили стиль. То есть цвет текста всех абзацев был темно-серым, а мы изменили цвет некоторых параграфов на красный. Вот вам и переопределение стилей.
Но задание стилевого класса годится в том случае, когда нужно переопределить правила группе элементов. То есть нескольким параграфам, изображениям и т.д. Но что делать, если переопределить стили нужно всего лишь одному элементу? Для этой цели уже лучше использовать идентификатор.
Идентификатор (id) используется для того, чтобы присвоить уникальную метку конкретному элементу на веб-странице. Таким образом к нему можно будет обращаться в css через этот идентификатор и задавать какие-то правила. Они будут применены, даже если ранее для этого элемента были заданы абсолютно другие стили.
Например, у нас есть 2 абзаца, в котором текст окрашен красным цветом. Но если одному из них задать идентификатор и потом описать в css стили для этого селектора, то они будут приоритетнее, чем правила класса.
color : blue ;
Обновим страницу и убедимся в том, что цвет текста синий. Но по сути для нашего абзаца цвет текста задается в трех местах. Во-первых, в селекторе тега – темно-серый. Во-вторых, в классе – красный. В-третьих, в идентификаторе.
Какой вывод из этого эксперимента? А то, что класс приоритетнее селектора тега, а идентификатор приоритетнее класса. Еще одно важное утверждение, которые вы должны понять для себя: стилевые классы обычно используют для стилизации группы элементов (пункты меню, группа абзацев, ряд картинок), а идентификаторы – для стилизации одиночных элементов, уникальных на сайте (шапка, подвал, какая-то иконка, логотип и т.д.).
Переопределение с помощью встроенных стилей
Любому html-элементу можно встроить стили прямо в тег, прописав их с помощью атрибута style. Если мы сделаем так:
Смотрите, у нашего параграфа уже куча свойств, определяющих оформление. Но его текст станет зеленым, как это описано в атрибуте style. Почему? Да потому что внутренние стили имеют самый высокий приоритет.
Ломаем все правила с помощью !important
Мы подобрались к css-приему, который ломает все правила приоритетности и отправляет их в мусорное ведро. Это запись !important, которая помечает свойство как самое важное. Давайте рассмотрим тот же самый пример. У нас есть параграф, его код приведен выше. Как видно, для него записано аж 4 разных варианта цвета.
В частности, в селекторе тега указан темно-серый цвет, но он перебивается классом, идентификатором и внутренними стилями, которые в нашем случае перебивают все остальное. Но есть простой способ перебить все это. Запишем так:
font — size : 16px ;
color : #333 !important;
То есть те же самые стили для селектора всех абзацев, только при определении цвета после значения дописано !important. Эта команда помечает стиль как важный. То есть тот, который обязательно должен применится. Ну проверим:
Все абзацы одного цвета – темно-серого. Заметьте. Что ни класс, ни идентификатор, ни даже встроенные стили, которые по идее применяются в последнюю очередь и должны перебивать все, не могут переопределить цвет и он остается таким, каким он задан в селекторе тега.
Вот такие пироги. Правда, я советую вам не прибегать слишком часто к !important. А если нет острой нужды, то вовсе не прибегать. Естественно, если вы пропишите для стилевого класса !important, то уже этот стиль будет самым важным. Причем в состязании: селектор тега !important и класс !important, победит класс. И вы уже понимаете, по какой причине. Ну и так далее. Получается, что можно встроенному стилю тоже дописать !important. Вот это будет уже конечное переопределение, которое невозможно перебить.
Ну опять же, не советую вам слишком много играться с important, это считается плохим тоном верстки.
Итог
Окей. С переопределением мы вроде разобрались. Конечно, мы рассмотрели не все способы переопределения. О некоторых вы можете догадаться и сами. Например, использование вложенных селекторов. В принципе можно легко догадаться, что абзацы в боковой колонке легко отделить от абзацев в основной части сайта.
Переопределение класса в CSS
По этому поводу уже есть много вопросов. Но мне все еще не ясно. Также не уверен, правильный ли заголовок вопроса. Вот моя проблема:
Что означает приведенный ниже код CSS?
#nav li < /*some cssA*/ >#nav li.over < /*some cssB*/ >#nav li a < /*some cssC*/ >#nav li a:hover < /*some cssD*/ >#nav li ul a span < /*some cssE*/ >Насколько я понимаю, поправьте меня, если я ошибаюсь:
Строка 1: каждый элемент li в любом элементе с будет иметь стиль cssA
Строка 2: когда я наведу курсор на каждый элемент li в любом элементе с , я буду иметь стиль cssB
Строка 3: каждый элемент a в каждом элементе li в любом элементе с будет иметь стиль cssC
Строка 4: при наведении курсора на каждый элемент a в каждом элементе li в любом элементе с будет отображаться стиль cssD
Строка 5: каждый элемент span в каждом элементе a в каждом элементе ul в каждом элементе li в любом элементе с будет иметь стиль cssE . Также любой другой элемент ul или a не будет иметь этого стиля до тех пор, пока родительский элемент не имеет
sumit 17 Янв 2013 в 22:06
.over — это класс. Вы думаете о :hover . В остальном да, вы правы.
Blazemonger
17 Янв 2013 в 22:07
3 ответа
Лучший ответ
Вы правы во всем, кроме «.» представляет класс. а «#» представляет идентификатор. Но да, у вас есть концепция.
Кроме того, если вы хотите «Переопределить», как сказано в заголовке, вы добавите
!important До конца любых правил, которые вы хотите иметь приоритет над другими.
Chazt3n 17 Янв 2013 в 22:07
Спасибо. Итак, если у меня .classA .classB .classC < some css >. И наличие class=»classC» в каком-то элементе. Тогда приведенный выше стиль будет применяться только в том случае, если родительский элемент имеет класс B, а родительский элемент имеет класс A? Я прав?
17 Янв 2013 в 22:11
10-4 снова, вот отличный справочник по селекторам css, а также w3schools.com/cssref/css_selectors .asp
17 Янв 2013 в 22:13
17 Янв 2013 в 22:17
Ха-ха, хорошо, спасибо, Quadrupal Z. Я чувствую, что большинство из этих основных cssSelectors точны, но я приму ваш совет с немного большей, чем обычно, солью из-за моего собственного опыта работы с w3 и их подхода «мы создаем свои собственные стандарты и никому не следуем».
17 Янв 2013 в 22:24
Хотя я не отрицал этот ответ, использование !important, как правило, является плохой практикой (см. padolsey.com/usability/dont-use-important), а специфичность и каскадный порядок, как правило, следует использовать для обеспечения того, чтобы правильные стили применялись к нужным элементам.
17 Мар 2013 в 20:28
Вы можете переопределить CSS, указав! important, или вы можете указать встроенный стиль. приоритет встроенного CSS выше, чем внешнего CSS
Ankit Agrawal 17 Янв 2013 в 22:13
Следует избегать использования флага !important в пользу более конкретных стилей или использования каскадного порядка, где это возможно. См. james.padolsey.com/usability/dont-use-important.
17 Мар 2013 в 20:26
Все существующие ответы верны, но это немного больше, чем уже было дано.
Как уже было сказано, «li.over» — это комбинированный селектор — он будет селектировать элементы li, которые также имеют класс «over». Если вы хотите использовать другие свойства CSS или значения свойств при наведении указателя мыши на элемент (при наведении курсора), используйте селектор псевдокласса «li: hover». Они называются псевдоклассом, поскольку вы выбираете не что-то, что является частью документа, а на основе состояния элемента. Есть также псевдоэлементы , которые снова не находятся в документе напрямую, а являются логическими расширениями структуры документа — например, первый дочерний элемент, первый по типу, пятый по типу, нечетные элементы. и т.п.
«#nav li ul a span» — это селектор-потомок, как вы говорите, он будет выбирать элементы, которые являются дочерними (на любом уровне) каждого родителя, поэтому «#nav li» выбирает элементы «li», содержащиеся в элементе с идентификатором » nav »- даже на несколько уровней ниже.
Если вы хотите выбрать элементы, которые являются прямыми дочерними элементами родительского объекта, вы можете использовать символ «>». Т.е. «#nav> li» выберет элементы li, которые находятся непосредственно под любым элементом с идентификатором «nav», но не любые элементы li, которые являются дочерними для этого элемента, или даже элементы ниже этого.
Между прочим, «#nav» в точности эквивалентен «* # nav», поскольку он выбирает любой элемент с идентификатором, вы также можете написать «ul # nav», если хотите выбрать только элементы ul с идентификатором. Это, в свою очередь, можно комбинировать с классом «ul # nav.bar» или даже с несколькими классами «ul # nav.bar.touch».
Удаление пространства между селекторами таким образом объединяет их, поэтому в последнем случае вместо поиска элемента с классом «touch» внутри элемента с классом «bar» внутри элемента с идентификатором «nav» внутри элемента «ul», вы выбираете элемент «ul» с идентификатором «nav» и оба класса «bar» и «touch». Такой элемент —
Также можно использовать селекторы атрибутов, поэтому, если вы хотите выбрать ссылки, которые будут открываться в новом окне, вы можете использовать «a [target = _blank]» — который выбирает на основе наличия атрибута и значения — или если вы хотите выбрать ссылки со значением any href, вы можете использовать «a [href]». Это просто выбирает все элементы с этим атрибутом.
Вдобавок к этому вы даже можете выбрать элементы, которые находятся рядом (рядом с) другим элементом. Если вы хотите выделить все абзацы непосредственно после изображения, вы должны использовать «img + p» в своем селекторе или «p + img», если вы хотели выбрать изображения сразу после абзаца. Как всегда, последний элемент в селекторе — это тот, к которому применяются стили.
Обычно считается хорошей практикой не слишком конкретизировать CSS-селекторы, поскольку это делает ваш код менее пригодным для повторного использования. Если вам не нужно писать «div.widget», просто напишите «.widget», поскольку в противном случае вы не сможете создать «виджет» с использованием других элементов, и в таких случаях впоследствии будет намного сложнее переопределить эти свойства. вам может понадобиться.
Чтобы завершить селекторы, есть хорошее введение в селекторы CSS на MDN и Code School (поставщик платных курсов) также предлагают отличный базовый онлайн-курс по CSS доступен по очень разумной цене, и некоторые детали будут рассмотрены в селекторах.
Что касается переопределения классов, вам следует понять еще две концепции — каскадный порядок и специфичность.
Учитывая фрагмент HTML —
Some text you want to style
И следующий CSS-
#widget p < color: yellow; >p
Цвет текста будет желтым, а не синим, потому что специфика первого селектора больше (точнее), чем второго. Чтобы понять это, я предлагаю вам поиграть с калькулятором специфичности и прочитать учебник по Smashing Magazine по этой теме.
Короче говоря, встроенные стили важнее всего, и чем конкретнее селектор, тем больше вероятность, что он будет применен вместо других селекторов, которые в противном случае применяли бы другие значения свойств. Значение в селекторе с наивысшей оценкой специфичности «побеждает», но другие значения свойств из селекторов с меньшей специфичностью, которые не конфликтуют , также будут применены к элементу.
Например, изменив наш предыдущий CSS-
#widget p < color: yellow; >p
Текст по-прежнему будет желтым, но будет также полужирным, поскольку в селекторе нет свойства font-weight с более высокой специфичностью.
Последнее, что вам следует понять, — это то, что происходит, когда два или более правил имеют одинаковую специфичность.
#widget p < color: yellow; >#widget p
В этом случае наш текст теперь синий, так как второе правило появляется позже в таблице стилей и, таким образом, отменяет первое. Если у вас несколько таблиц стилей, то правила из последней таблицы стилей, появившейся в заголовке документа, переопределят правила с идентичной специфичностью.