The problem with background color of elements
,
(children) and (parent)
i am quite new in CSS , currently struggling with the issue.
I want elements p, h1 (children) and h1 (parental) to have different background, but in browser for all elements shows up with same color (darkmagenta) . I tried before to put s as parental and child elements with classes - it worked. But this case (h1,h1,p) doesn't work, cause they inherit background from parent h1. Do you have any explanation of that ? If my mistake is in code, please let me know what exactly. Thank you )
<style>
.A {
font-size: 60px;
width: 500px;
height: 90px;
background: darkmagenta;
}
#B {
width: 70%;
height: 30%;
background: rgb(216, 166, 40);
}
.C {
width: 50%;
height: 20%;
background: darkred;
}
</style>
<body>
<h1 class="A">
<h1 id="B"></h1>
<p class="C"></p>
</h1>
</body>Ответы (1 шт):
Автор решения: Igor
→ Ссылка
Обратите внимание внимание на то, где находится закрывающий </h1> для первого h1.
<style>
.A {
font-size: 60px;
width: 500px;
height: 90px;
background: darkmagenta;
}
#B {
width: 70%;
height: 30%;
background: rgb(216, 166, 40);
}
.C {
width: 50%;
height: 20%;
background: darkred;
}
</style>
<body>
<h1 class="A">AAA
<h1 id="B">BBB</h1>
<p class="C">CCC</p>
AAA1
</h1>
</body>