html — Почему дочерний элемент не наследует цвет фона от своего родителя?
У меня есть вложенная структура div в моем HTML, а затем я применяю background-color во внешнем div, но внутренний div не наследует это свойство, как я могу этого добиться?
Я просто добавил background-color в свой верхний div some-class
Когда я применяю это, в классе контейнера нет цвета фона.
HTML
CSS
цвет фона
2
По умолчанию этого не происходит, на самом деле в большинстве случаев элементы будут перекрываться (как в вашем примере) и, следовательно, в любом случае имеют один и тот же фон.
Однако, если вы хотите именно такое поведение, вы можете использовать css inherit ключевое слово
.some-class{
цвет фона: #0b7261;
box-sizing: граница-коробка;
белый цвет;
отступ: 10 пикселей;
}
.контейнер{
дисплей: гибкий;
flex-направление: строка;
цвет фона: наследовать;
}
6
background-color просто не является свойством, которое наследуется дочерними элементами. Однако в большинстве случаев дочерние элементы будут внутри родительского элемента, а значением по умолчанию для background-color является Transparent , поэтому большинство дочерних элементов, для которых не задан фоновый цвет, будут отображаться с фоновым цветом родителя (исходя из parent), как это также можно увидеть во фрагменте, который является частью вашего вопроса.
В редких случаях, когда дочерний элемент находится за пределами родительского элемента (или частично за его пределами), вы можете использовать настройку наследовать для цвета фона.
Зарегистрируйтесь или войдите в систему
Зарегистрируйтесь с помощью Google
Зарегистрироваться через Facebook
Зарегистрируйтесь, используя адрес электронной почты и пароль
Опубликовать как гость
Электронная почта
Обязательно, но не отображается
Опубликовать как гость
Электронная почта
Требуется, но не отображается
тестов CSS — значения наследования, начального, возврата и сброса
тестов CSS — значения наследования, начального, возврата и сброса
Вернуться к оглавлению.
наследуют 9Ключевые слова 0004 , initial и unset — это специальные значения, которые вы можете присвоить любому свойству CSS.
унаследовать
Это ключевое слово применяет значение родительского элемента, независимо от того, имеет ли это смысл. Некоторые свойства CSS, такие как color или font-family , наследуются автоматически, а другие, например display или margin , — нет. Однако ключевое слово inherit должно работать со всеми свойствами CSS.
начальный
Это ключевое слово применяет начальное значение, определенное в спецификациях CSS. Иногда это начальное значение имеет смысл ( float: none ), иногда оно существует по историческим причинам ( background-repeat: repeat ), а иногда авторы спецификации сделали по существу случайный, хотя и несколько оправданный выбор ( color: черный ).
снято с охраны
Это ключевое слово применяет унаследованное значение, если свойство обычно наследуется (например, color ) или начальное значение, если свойство обычно не наследуется (например, display ).
вернуть
Это ключевое слово применяет унаследованное значение, если свойство обычно наследуется (например, color ), или значение, определенное в таблице стилей браузера, если свойство обычно не наследуется (например, display ).
Тесты
На этой странице есть несколько дополнительных стилей для тестирования:
Цвета наследуются, поэтому ярко-синий цвет, использованный на этой странице, должен применяться ко всем элементам. Эта страница содержит несколько элементов, которые имеют жестко закодированные цвета, например элементы кода, которые имеют уродливый зеленый цвет. Установка цвета : наследовать приводит к тому, что эти элементы также становятся синими .
Начальное значение цвета — черный. Таким образом, установка кода : начальный должна привести все элементы к черный цвет.
Поскольку цвета наследуются, color: unset должен заставить их всех наследовать и, таким образом, синий .
Поскольку цвета наследуются, color: revert должен заставить их всех наследовать и, таким образом, синий . Кнопки (и поля выбора ниже) остаются черными, по-видимому, в соответствии с таблицей стилей браузера, которая содержит кнопка {цвет: черный} . Я не понимаю такого поведения, поэтому скажу, что элементы формы странные.
Отображаемые значения не наследуются. Настройка display: inherit делает все дочерние элементы тела блоком элементов уровня, так как тело имеет display: block .
Начальное значение display равно inline .
Таким образом, установка display: initial должна сделать все дочерние элементы тела встроенными элемента.
Поскольку отображаемые значения не наследуются, display: unset должно привести все элементы к начальному и, таким образом, к встроенному .
Поскольку отображаемые значения не наследуются, отображение: возврат должен привести все элементы к значениям, определенным в таблице стилей браузера. Таким образом, страница будет выглядеть нормально, за исключением того, что мы потеряем display: grid в этом списке, так как dl s
стиль браузера 9Отображение 0003: блок .
Игровая площадка
В любом случае, поиграйте с этими значениями. Выберите свойство и значение и посмотрите, что произойдет. Попробуйте спрогнозировать, что должно произойти, и помните, что некоторые браузеры не поддерживают unset или initial .
