Можно ли дать один приоритет класса CSS над другим?
Скажем, у меня есть div, в котором используются два класса css, которые используют text-align, но один из них центрирован, а другой выравнивается по правому краю.
Можно ли указать что-то, что даст один приоритет класса другому?
Ответы
Ответ 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; }