Проблема со спецификой CSS
У меня есть вложенный div, как это
<div class = "myDiv">
<div class = "myOtherDiv">
В моем CSS я хочу myOtherDiv иметь margin: 0 auto; but not myDiv
если я напишу
.myDiv{
margin: 0 auto;
}
Это относится к обоим со спецификой 0,1,0
Но
.myDiv .myOtherDiv{
margin:0 auto;
}
Ничего не произошло. Что странно, визуальный код сообщает, что специфичность этого значения равна 0,2,0, что выше, так что не следует ли это применять?
Укажите минимальный воспроизводимый пример, чтобы мы могли увидеть, что не работает.
Ответы 2
.myDiv .myOtherDiv {} или просто .myOtherDiv {} должны подойти для таргетинга на myOtherDiv.
Вы дали div ширину? Элементы уровня блока, такие как div, по умолчанию имеют ширину 100% от их родителя. Поэтому вам нужно установить определенную меньшую ширину или использовать display: table;, чтобы содержимое определяло ширину. Смотри ниже:
.myDiv{
background: blue;
}
.myOtherDiv{
margin: 0 auto;
display: table;
background: red;
}<div class = "myDiv">
<div class = "myOtherDiv">content
</div>
</div>Поскольку вы не предоставили весь код CSS, трудно сказать. Однако,
Проблемы с margin: 0 auto;
вы обычно являетесь результатом того, что элемент не является элементом блокировать или содержит ширина.
Поскольку div, естественно, является блочным элементом, он занимает всю доступную ширину, даже если у вас есть только 1 буква внутри этого div (например, <div>A</div>
Вы должны объявить ширину перед центрированием элементов div.
Так, например:
.myDiv {
width: 50%;
margin: 0 auto;
}
Я приветствую специфичность,
Если родитель<div> не назначен ширинаmargin:0 auto, ничего не будет делать. Однако, если вы назначите ширину, то блок не будет занимать все пространство страницы, и тогда сам блок будет центрирован, но элементы дочернего блока не будут центрированы или затронуты.
Если вы назначите и дочерний, и родительский div margin:0 auto без установленного ширина, это приведет к нулевому эффекту, не влияя на позиционирование вообще, потому что каждый блок просто занимает все возможное пространство на странице.
Если вы хотите, чтобы дочерний блок div располагался по центру, назначьте ширину дочернему div и оставьте родительский div в покое. Поскольку родитель занимает все пространство ширины страницы, дочерний элемент div будет центрирован на странице с помощью margin:0 auto; и назначенной вами ширины.
Возможно, я пропустил объяснение «ширины». Однако мой ответ более читабелен. Так что, по крайней мере, ради удобочитаемости и понимания мой ответ не заслуживает отрицательного голоса.
На самом деле, если вы достаточно работали с CSS, вы должны знать, что без установки ширины блочный элемент не может быть центрирован, если только это не просто текст, который в этом случае вы используете text-align: center. Что касается конкретики, вы правы - я не смог решить эту проблему и сделаю это сейчас.
Если вы посмотрите мой профиль, то увидите, что я много знаю о CSS. Если вопрос касается указания ширины div для работы автоматического поля, вопрос является дубликатом, и снова на него не следует отвечать, вместо этого следует использовать встроенный «голосовать / отмечать закрытие как дубликат», поэтому, что бы ни было правдой, ответ не должен быть опубликован.
@LGSon У тебя больше опыта в SO, чем у меня. Я здесь только для того, чтобы помочь людям, полагаю, я немного наверстаю упущенное в отношении действующей системы и ее правил и процессов. Так что, даже если у нас был короткий обмен мнениями, я уважаю ваше мнение и точку зрения на этот вопрос.
Проверив это, CSS в порядке -
.myDiv {применяется только кmyDiv, а.myDiv .myOtherDiv {применяется только кmyOtherDiv, поэтому я не уверен, в чем ваша проблема. Попробуйте это с чем-то другим, кромеmargin: 0 auto;(например, с текстомcolorилиbackground-color) и посмотрите, что и где применимо.