Доброго времени суток! Верстаю header. Разбит он на 3 секции.В свою очередь, каждая секция разбита на 3 фигуры. В каждой секции должен быть свой background из чего формируется картинка, фигуры без background. Я решил поверстать по методологии “наследование”(возможно есть другие названия). И вот сразу же проблема – background ведет себя не ожидаемо. background первой секции применяется не к ней, а к родителю. А background остальных 2-х секций не применяются.
#header { display: flex; justify-content: space-between; border: 1px solid; width: 100%; height: 200px; } #header .section{ width: 33%; border: 1px solid; display: flex; justify-content: space-between; } #header:first-child { background-image: url("https://cdn.pixabay.com/photo/2014/12/21/23/56/hamburger-576419__340.png"); background-repeat: no-repeat; background-position: bottom; background-size: 100% 20%; } #header:nth-child(2) { background-image: url("https://cdn.pixabay.com/photo/2014/12/21/23/40/steak-575806__340.png"); background-repeat: no-repeat; background-size: 70px 70px; } #header:nth-child(3) { background-image: url("https://cdn.pixabay.com/photo/2013/07/13/10/12/cup-156743__340.png"); background-repeat: no-repeat; background-size: 70px 70px; } #header:first-child .widget{ width: 25%; border: 1px solid red; height: 50%; } #header:first-child .widget:first-child{ /*background: none;*/ background-repeat: no-repeat; background-size: 70px 70px; }<header id="header"> <section class="section"> <figure class="widget"></figure> <figure class="widget"></figure> <figure class="widget"></figure> </section> <section class="section"> <figure class="widget"></figure> <figure class="widget"></figure> <figure class="widget"></figure> </section> <section class="section"> <figure class="widget"></figure> <figure class="widget"></figure> <figure class="widget"></figure> </section> </header> Во всех учебниках указывают, что псевдокласс :first-child пишется без пробела. Но я решил поставить пробел. В итоге, background первой секции стал как нужно, но при этом, все первые элементы секций наследовали этот background. Ниже 2-й вариант кода, с пробелом, перед псевдоклассом
#header { display: flex; justify-content: space-between; border: 1px solid; width: 100%; height: 200px; } #header .section{ width: 33%; border: 1px solid; display: flex; justify-content: space-between; } #header :first-child { background-image: url("https://cdn.pixabay.com/photo/2014/12/21/23/56/hamburger-576419__340.png"); background-repeat: no-repeat; background-position: bottom; background-size: 100% 20%; } #header:nth-child(2) { background-image: url("https://cdn.pixabay.com/photo/2014/12/21/23/40/steak-575806__340.png"); background-repeat: no-repeat; background-size: 70px 70px; } #header:nth-child(3) { background-image: url("https://cdn.pixabay.com/photo/2013/07/13/10/12/cup-156743__340.png"); background-repeat: no-repeat; background-size: 70px 70px; } #header:first-child .widget{ width: 25%; border: 1px solid red; height: 50%; } #header:first-child .widget:first-child{ /*background: none;*/ background-repeat: no-repeat; background-size: 70px 70px; }<header id="header"> <section class="section"> <figure class="widget"></figure> <figure class="widget"></figure> <figure class="widget"></figure> </section> <section class="section"> <figure class="widget"></figure> <figure class="widget"></figure> <figure class="widget"></figure> </section> <section class="section"> <figure class="widget"></figure> <figure class="widget"></figure> <figure class="widget"></figure> </section> </header>Как быть? Я совсем запутался)
