Подтвердить что ты не робот

Можно ли дать один приоритет класса CSS над другим?

Скажем, у меня есть div, в котором используются два класса css, которые используют text-align, но один из них центрирован, а другой выравнивается по правому краю.

Можно ли указать что-то, что даст один приоритет класса другому?

4b9b3361

Ответ 1

  • укажите более конкретный селектор, например, префикс идентификатора перед ним или префикс nodename перед классом
  • назначить его после другого класса
  • Если два класса находятся в отдельных файлах, импортируйте второй файл приоритета
  • важно!

!important - это ленивый способ, но вы действительно должны пойти на # 1, чтобы избежать важного принятия. Как только вы добавили один !important, вы не сможете использовать его, чтобы сделать другое правило еще более важным.

Ответ 2

Если вы хотите быть явным, вы можете указать, как комбинация этих двух классов работает вместе, предоставляя правило для элементов, содержащих оба класса. Например, вы можете явно дать что-то с двумя классами foo и bar тем же стилем, что и только bar, как показано ниже. Это работает, потому что .foo.bar более специфичен, чем просто .foo для элементов, которые имеют оба класса, и, следовательно, это правило будет иметь приоритет над правилом .foo.

.foo { text-align: center }
.bar, .foo.bar { text-align: right }

Если вы не хотите, чтобы это было явным, вы можете просто поместить правило для bar после правила для foo, поскольку заданы селекторы с той же специфичностью, более поздние правила имеют приоритет над более ранними:

.foo { text-align: center }
.bar { text-align: right }

Вы можете узнать больше о том, как приоритет между правилами определяется в главе спецификации CSS о cascade; что "C" CSS, и важно хорошо понимать, чтобы в полной мере использовать CSS.

Ответ 3

Вы должны использовать спецификацию CSS для переопределения предыдущих объявлений http://htmldog.com/guides/cssadvanced/specificity/

p = 1 point
.column = 10 points
#wrap = 100 points

Итак: p.column { text-align: right; } могут быть перезаписаны: body p.column { text-align: left; }